如何实现点击SVG文件更改不同区域颜色的交互效果

一、准备工作 #

• 确认你的SVG是可编辑的矢量文件（不是转成图片的SVG），用文本编辑器（比如VS Code、Notepad++）打开，给需要交互的图形元素（<path>、<rect>、<circle>等）添加唯一的id或class，方便定位。
• 示例基础SVG结构：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect id="green-box" x="10" y="10" width="80" height="80" fill="#4CAF50" />
  <circle id="blue-circle" cx="150" cy="50" r="40" fill="#2196F3" />
</svg>

二、方法1：纯SVG内联脚本实现（独立SVG文件适用） #

直接在SVG内部加脚本，不用额外HTML文件：

1. 打开SVG，在<svg>标签末尾插入<script>标签。
2. 绑定事件修改元素的fill属性：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect id="green-box" x="10" y="10" width="80" height="80" fill="#4CAF50" />
  <circle id="blue-circle" cx="150" cy="50" r="40" fill="#2196F3" />

  <script type="text/javascript"><![CDATA[
    // 获取目标元素
    const box = document.getElementById('green-box');
    const circle = document.getElementById('blue-circle');

    // 点击矩形切换颜色
    box.addEventListener('click', () => {
      box.setAttribute('fill', box.getAttribute('fill') === '#4CAF50' ? '#FF9800' : '#4CAF50');
    });

    // 鼠标悬停圆形变色，离开恢复
    circle.addEventListener('mouseover', () => {
      circle.setAttribute('fill', '#F44336');
    });
    circle.addEventListener('mouseout', () => {
      circle.setAttribute('fill', '#2196F3');
    });
  ]]></script>
</svg>

• 用<![CDATA[...]]>包裹脚本是为了避免SVG中的特殊字符被解析成XML标签。
• 保存后用浏览器打开，点击矩形、悬停圆形就能看到效果。

三、方法2：HTML+JS控制SVG（网页嵌入场景适用） #

如果SVG要嵌入网页，这种方式更灵活：

1. 在HTML中嵌入SVG（直接写代码或用<object>引入外部文件）：

<!DOCTYPE html>
<html>
<body>
  <!-- 直接嵌入SVG代码 -->
  <svg id="my-svg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="green-box" x="10" y="10" width="80" height="80" fill="#4CAF50" />
    <circle id="blue-circle" cx="150" cy="50" r="40" fill="#2196F3" />
  </svg>

  <!-- 或者用object引入外部SVG（注意同域名，避免跨域） -->
  <!-- <object id="svg-obj" data="your-svg-file.svg" type="image/svg+xml" width="200" height="200"></object> -->

  <script>
    // 直接嵌入的SVG，直接获取元素
    const box = document.getElementById('green-box');
    box.addEventListener('click', () => {
      box.style.fill = box.style.fill === 'rgb(76, 175, 80)' ? '#FF9800' : '#4CAF50';
    });

    // 如果用object引入，要等SVG加载完成再操作
    // const svgObj = document.getElementById('svg-obj');
    // svgObj.addEventListener('load', () => {
    //   const svgDoc = svgObj.contentDocument;
    //   const circle = svgDoc.getElementById('blue-circle');
    //   circle.addEventListener('mouseover', () => {
    //     circle.setAttribute('fill', '#F44336');
    //   });
    // });
  </script>
</body>
</html>

四、进阶技巧：用CSS类批量控制颜色 #

需要批量修改时，用CSS类切换更易维护：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .default { fill: #4CAF50; }
    .active { fill: #FF9800; }
    .hover { fill: #F44336; }
  </style>
  <rect id="green-box" x="10" y="10" width="80" height="80" class="default" />
  <circle id="blue-circle" cx="150" cy="50" r="40" class="default" />

  <script type="text/javascript"><![CDATA[
    const box = document.getElementById('green-box');
    box.addEventListener('click', () => {
      box.classList.toggle('active');
    });

    const circle = document.getElementById('blue-circle');
    circle.addEventListener('mouseover', () => {
      circle.classList.add('hover');
    });
    circle.addEventListener('mouseout', () => {
      circle.classList.remove('hover');
    });
  ]]></script>
</svg>

内容的提问来源于stack exchange，提问作者Sonia Ejaz