如何修改本地外部SVG文件中指定路径的填充颜色？

这个问题我之前也遇到过！核心原因是外部SVG通过<use>引用时，会创建一个影子DOM（Shadow DOM），主页面的CSS和<use>上的fill属性没法直接穿透到外部SVG的路径元素上；另外如果外部SVG里的路径本身有内联的fill或style属性，它的优先级会比你设置的更高，导致你的样式被忽略。

下面给你两种可行的解决方案，根据你的需求选就行：

方法一：用CSS变量单独控制每个路径颜色 #

这是最灵活的方法，不需要把SVG内容嵌入页面，直接引用外部文件就能实现多实例不同颜色。

步骤1：修改外部SVG文件 #

把外部SVG（比如ValueChain1Plan.svg）里的路径fill属性改成CSS变量，同时去掉内联的style属性（如果有的话）：

<!-- ValueChain1Plan.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <g id="group1">
    <!-- 给每个路径设置专属的CSS变量，默认值可选 -->
    <path id="path1" d="M20 20 L80 20 L80 80 L20 80 Z" fill="var(--path1-fill, #333)" />
    <path id="path2" d="M120 20 L180 20 L180 80 L120 80 Z" fill="var(--path2-fill, #666)" />
  </g>
</svg>

步骤2：在页面中引用并设置变量 #

引用SVG时，给包裹的<svg>元素设置对应的CSS变量，就能单独控制每个路径的颜色：

<!-- 第一个实例：path1红，path2蓝 -->
<svg id="svgtest1" width="200" height="200" style="--path1-fill: red; --path2-fill: blue;">
  <use href="./ValueChain1Plan.svg"></use>
</svg>

<!-- 第二个实例：path1绿，path2黄 -->
<svg id="svgtest2" width="200" height="200" style="--path1-fill: green; --path2-fill: yellow;">
  <use href="./ValueChain1Plan.svg"></use>
</svg>

方法二：将外部SVG转为页面内的<symbol>引用 #

如果需要更复杂的样式控制（比如hover效果），可以把外部SVG的内容嵌入页面作为<symbol>，这样CSS就能直接选中路径元素。

步骤1：导入外部SVG到页面 #

把外部SVG的内容放到页面的隐藏<svg>里，用<symbol>包裹（也可以用JavaScript动态加载，避免HTML冗余）：

<!-- 隐藏的SVG容器，用来存放symbol -->
<svg style="display: none;">
  <symbol id="value-chain-plan" viewBox="0 0 200 200">
    <!-- 这里直接复制外部SVG的内容，去掉外层的<svg>标签 -->
    <g id="group1">
      <path id="path1" d="M20 20 L80 20 L80 80 L20 80 Z" />
      <path id="path2" d="M120 20 L180 20 L180 80 L120 80 Z" />
    </g>
  </symbol>
</svg>

步骤2：引用symbol并写CSS样式 #

现在引用时直接指向<symbol>的ID，然后用CSS选择器针对不同实例控制路径颜色：

<svg id="svgtest1" class="svg-instance-1" width="200" height="200">
  <use href="#value-chain-plan"></use>
</svg>

<svg id="svgtest2" class="svg-instance-2" width="200" height="200">
  <use href="#value-chain-plan"></use>
</svg>

对应的CSS：

/* 第一个实例的路径颜色 */
.svg-instance-1 #path1 {
  fill: crimson;
}
.svg-instance-1 #path2 {
  fill: dodgerblue;
}

/* 第二个实例的路径颜色，还可以加hover效果 */
.svg-instance-2 #path1 {
  fill: forestgreen;
}
.svg-instance-2 #path2 {
  fill: gold;
}
.svg-instance-2 #path1:hover {
  fill: limegreen;
}

关键注意事项 #

• 不管用哪种方法，外部SVG必须设置viewBox属性，否则引用时可能显示变形或不显示。
• 如果原SVG路径有内联style="fill: #xxx"，一定要删掉，否则会覆盖你设置的样式（内联样式优先级最高）。
• CSS变量方法支持所有现代浏览器，不需要担心兼容性问题。

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