如何为SVG symbol的<use>实例设置hover样式（兼容fill属性）

方法1：CSS强制覆盖（简单直接） #

利用!important提升CSS优先级，直接覆盖symbol的内联fill属性，不管symbol是否自带fill都能生效：

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <symbol id="redCircle" fill="red" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20"/>
  </symbol>

  <style>
    use:hover {
      fill: gray !important;
    }
  </style>

  <use href="#redCircle" x="20" y="20"/>
  <use href="#redCircle" x="120" y="20"/>
</svg>

方法2：JavaScript事件监听（适配MQTT状态变更） #

考虑到你后续要通过MQTT接收状态变更，用JS控制更灵活，能同时处理hover交互和状态更新：

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <symbol id="redCircle" fill="red" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20"/>
  </symbol>

  <use href="#redCircle" x="20" y="20" class="circle-icon"/>
  <use href="#redCircle" x="120" y="20" class="circle-icon"/>

  <script type="text/javascript"><![CDATA[
    const icons = document.querySelectorAll('.circle-icon');
    icons.forEach(icon => {
      // 保存原始填充色，兼容symbol带/不带fill属性的情况
      const originalFill = icon.getAttribute('fill') || window.getComputedStyle(icon).fill;
      
      icon.addEventListener('mouseover', () => {
        icon.setAttribute('fill', 'gray');
      });
      
      icon.addEventListener('mouseout', () => {
        icon.setAttribute('fill', originalFill);
      });

      // 可直接扩展MQTT状态变更逻辑
      // 示例：
      // mqttClient.on('message', (topic, payload) => {
      //   if(topic === 'hmi/circle/status') {
      //     icon.setAttribute('fill', payload.toString() === 'on' ? 'green' : originalFill);
      //   }
      // });
    });
  ]]></script>
</svg>

这个方案的优势：

• 自动适配symbol带或不带fill属性的场景
• 后续集成MQTT状态更新时，直接修改fill属性即可，逻辑统一
• 不依赖CSS优先级，兼容性更稳定，适合嵌入式HMI环境

失效原因说明 #

SVG元素的内联fill属性优先级高于普通CSS样式，所以直接写use:hover { fill: gray; }会被symbol的fill="red"覆盖，通过!important强制提升优先级，或用JS直接修改元素属性，就能解决这个问题。

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