如何用CSS/JS为外部SVG图形设置填充色？

咱们先来拆解你遇到的问题：用<use>引用外部SVG时，CSS能正常设置描边，但填充色总是被覆盖，哪怕加了!important也不管用——这在SVG引用场景里是个挺常见的坑，咱们一步步来解决：

先修正代码里的小疏漏 #

我第一眼就看到你CSS里写的是!imporant，少了一个字母t，正确写法是!important，这个拼写错误直接导致优先级声明失效，先把这个改过来：

use.icon:hover {
  stroke: teal;
  width: 100px;
  fill: orange !important; /* 这里修正拼写错误 */
}

核心原因：外部SVG的内部样式优先级更高 #

如果修正拼写后还是不行，那大概率是你引用的willis-body.svg里的#body-windows-left元素本身已经设置了内联fill属性，或者在SVG内部的<style>标签里定义了fill规则。这些内部样式的优先级天生高于外部页面的CSS设置，哪怕你加了!important也不一定能覆盖（内联属性的优先级本来就比外部CSS高）。

针对性解决方案 #

方案1：修改外部SVG文件（最推荐） #

直接打开willis-body.svg，找到#body-windows-left对应的元素（比如<path>、<rect>这类图形元素），把它的fill属性去掉，或者改成fill="inherit"：

<!-- 原SVG里的元素可能是这样的 -->
<path id="body-windows-left" fill="#aaaaaa" d="..."/>

<!-- 修改成下面两种方式之一 -->
<path id="body-windows-left" fill="inherit" d="..."/>
<!-- 或者直接删除fill属性 -->
<path id="body-windows-left" d="..."/>

这样外部页面的CSSfill设置就能正常继承到SVG内部的元素上了。

方案2：用JS强制修改填充色（无法改动外部SVG时用） #

如果没法修改外部SVG文件，可以用JavaScript获取<use>对应的SVG内容，直接修改内部元素的填充色。示例代码如下：

// 等待页面加载完成再执行
document.addEventListener('DOMContentLoaded', () => {
  const useIcons = document.querySelectorAll('use.icon');
  
  useIcons.forEach(icon => {
    // 鼠标 hover 时修改颜色
    icon.addEventListener('mouseover', () => {
      const svgDoc = icon.getSVGDocument();
      if (svgDoc) {
        const targetElem = svgDoc.getElementById('body-windows-left');
        if (targetElem) {
          targetElem.setAttribute('fill', 'orange');
          targetElem.setAttribute('stroke', 'teal');
        }
      }
    });
    
    // 鼠标移出时恢复原颜色（可选）
    icon.addEventListener('mouseout', () => {
      const svgDoc = icon.getSVGDocument();
      if (svgDoc) {
        const targetElem = svgDoc.getElementById('body-windows-left');
        if (targetElem) {
          targetElem.setAttribute('fill', '原填充色'); // 替换成SVG原本的填充色
          targetElem.removeAttribute('stroke');
        }
      }
    });
  });
});

⚠️ 注意：这种方法要求外部SVG和当前页面是同域的，否则会触发跨域限制，无法获取SVG文档内容。

方案3：用CSS变量灵活控制（需要SVG微小配合） #

如果能给外部SVG做一点点修改，可以在SVG内部用CSS变量作为填充色的默认值：

<!-- 外部SVG里的目标元素 -->
<path id="body-windows-left" fill="var(--svg-fill, #原来的颜色)" d="..."/>

然后在外部页面的CSS里设置这个变量：

use.icon {
  --svg-fill: orange;
}
use.icon:hover {
  --svg-fill: orange;
  stroke: teal;
}

这种方法既保留了SVG的默认颜色，又能让外部CSS灵活控制，兼容性也不错。

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