外部SVG使用currentColor属性无法修改颜色的问题求助

问题根源 #

当用<img>、<embed>这类标签引用外部SVG时，SVG处于独立的文档上下文，外部CSS无法穿透到SVG内部。你给引用元素设置的color值，无法被SVG内部的currentColor继承，这就是颜色不生效的核心原因。

可行解决方案（满足外部引用+动态变色需求） #

方案1：用<object>引用+JS传递样式（贴合currentColor需求）

这种方法能直接复用currentColor的继承逻辑，仅需少量JS配合传递样式：

1. 修改SVG文件：确保内部路径没有单独设置fill，继承根元素的currentColor

<svg id="mySvg" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="你的路径数据" fill="inherit"/>
</svg>

2. HTML中用<object>引用SVG

<object data="my.svg" type="image/svg+xml" id="svg-wrapper"></object>

3. SCSS定义动态颜色

#svg-wrapper {
  color: blue; /* 替换成你的用户配置变量 */
}

4. JS传递颜色到SVG内部
   待SVG加载完成后，把外部元素的color值同步给SVG根元素：

const svgWrapper = document.getElementById('svg-wrapper');
svgWrapper.addEventListener('load', () => {
  const svgDoc = svgWrapper.contentDocument;
  const svgRoot = svgDoc.getElementById('mySvg');
  const computedColor = getComputedStyle(svgWrapper).color;
  svgRoot.style.color = computedColor;
});

方案2：SVG内部用CSS变量+外部控制（无需currentColor，更灵活）

用CSS变量替代currentColor，直接在外部控制SVG内部的颜色变量：

1. 修改SVG文件：内部定义CSS变量并绑定到路径填充色

<svg id="mySvg" width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
  <style>
    path {
      fill: var(--svg-fill-color, #000); /* #000为默认 fallback 颜色 */
    }
  </style>
  <path fill-rule="evenodd" clip-rule="evenodd" d="你的路径数据"/>
</svg>

2. HTML引用+SCSS设置变量

<object data="my.svg" type="image/svg+xml" id="svg-wrapper"></object>

#svg-wrapper {
  --svg-fill-color: blue; /* 替换成你的动态变量 */
}

3. JS同步变量到SVG内部

const svgWrapper = document.getElementById('svg-wrapper');
svgWrapper.addEventListener('load', () => {
  const svgDoc = svgWrapper.contentDocument;
  const root = svgDoc.querySelector(':root');
  const colorVal = getComputedStyle(svgWrapper).getPropertyValue('--svg-fill-color');
  root.style.setProperty('--svg-fill-color', colorVal.trim());
});

方案3：纯CSS mask实现（无需JS，适合单色图标）

如果你的SVG是单色图标，用CSS mask可以直接通过背景色控制图标颜色，完全不需要修改SVG内部：

1. SVG文件：确保路径fill为黑色（#000），mask会基于透明度显示背景色

<svg id="mySvg" width="40" height="40" viewBox="0 0 40 40" fill="#000" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="你的路径数据"/>
</svg>

2. HTML+SCSS

<div class="svg-icon"></div>

.svg-icon {
  width: 40px;
  height: 40px;
  background-color: blue; /* 替换成你的动态变量 */
  mask: url('my.svg') no-repeat center / contain;
  -webkit-mask: url('my.svg') no-repeat center / contain; /* 兼容webkit内核浏览器 */
}

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