如何通过JavaScript实现SVG指定元素hover时填充颜色切换

原代码存在的问题 #

• 未正确获取目标元素：直接使用col_05变量会触发未定义错误，类名无法直接作为全局变量调用，需通过DOM选择器获取元素。
• 缺少鼠标移出事件：仅添加了mouseover事件处理颜色切换，未实现鼠标移出时恢复原颜色的逻辑。

修正后的代码 #

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117.28 114.89">
  <rect class="col_05" x="3" y="3" width="110" height="110" style="fill: #e5211e;"/>
  <script>    
    // 获取目标SVG元素
    const col05 = document.querySelector('.col_05');
    // 保存元素原始填充色
    const originalFill = col05.style.fill;
    
    // 鼠标悬停时切换为黄色
    col05.addEventListener('mouseover', function() {
      col05.style.fill = 'yellow';
    });
    
    // 鼠标移出时恢复原始颜色
    col05.addEventListener('mouseout', function() {
      col05.style.fill = originalFill;
    });
  </script>
</svg>

关键说明 #

• 用document.querySelector('.col_05')精准选中类名为col_05的元素，避免变量未定义问题。
• 提前存储原始填充色，避免硬编码恢复值，保证代码的通用性。
• 同时绑定mouseover和mouseout事件，完整实现 hover 状态的颜色切换与恢复逻辑。

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