无法通过CSS控制img标签引入的SVG文件样式的解决方案

通过<img>标签加载的SVG会被浏览器作为独立外部图像资源渲染，处于与当前页面隔离的独立渲染上下文，页面自身的CSS规则完全无法穿透到该资源内部，这和SVG文件是否删除硬编码的fill/stroke属性无关。

你之前了解到的「删除SVG内部硬编码fill/stroke即可被外部CSS控制」的结论，仅适用于SVG节点存在于当前页面DOM树的场景，对<img>引用的隔离资源天然不生效。

你可以根据自己的业务场景选择以下任意一种方案实现外部控制SVG样式：

方案1：直接使用内联SVG（优先推荐，兼容性最好） #

直接将SVG源码嵌入HTML文档中，此时SVG的所有节点都属于当前页面DOM树的一部分，你可以通过任意CSS选择器直接控制路径、描边等样式，没有上下文隔离限制。
示例代码：

<!-- 直接写入SVG源码，无需img标签引用 -->
<svg class="custom-icon" viewBox="0 0 24 24" width="24" height="24">
  <path d="M12 2 2 22h20L12 2Z"/>
</svg>

/* 直接编写CSS即可生效 */
.custom-icon path {
  fill: #1677ff;
  stroke: #ffffff;
  stroke-width: 1px;
}

• 优点：支持多色SVG单独控制不同路径样式，无兼容性问题，无需额外JS逻辑
• 缺点：SVG源码会直接占用HTML文档体积，大量图标使用时会让HTML结构变冗余

方案2：使用<object>标签替代<img>引用SVG #

如果不希望把SVG源码直接写在HTML中，可以用<object>标签代替<img>加载SVG资源，这种方式可以在资源加载完成后通过JS获取SVG内部DOM注入样式，也可以配合currentColor实现无JS改色。
基础示例：

<object data="your-icon.svg" type="image/svg+xml" id="svgEl" width="24" height="24"></object>

// 等待SVG加载完成后操作内部节点
document.getElementById('svgEl').addEventListener('load', function() {
  const svgDom = this.contentDocument
  const targetPath = svgDom.querySelector('path')
  targetPath.style.fill = '#1677ff'
})

• 优点：不需要把SVG源码写入HTML，支持多色样式控制
• 缺点：需要额外JS逻辑，SVG文件必须和当前页面同域，否则会触发同源策略限制无法访问内部DOM

方案3：CSS mask遮罩方案（仅适用于单色图标） #

如果你的SVG是单色图标，可以将SVG作为遮罩层使用，通过控制元素的背景色实现图标改色，不需要修改DOM引入结构的逻辑。
示例代码：

.icon {
  width: 24px;
  height: 24px;
  /* 此处背景色即为图标最终显示颜色 */
  background-color: #1677ff;
  -webkit-mask: url('your-icon.svg') no-repeat center / contain;
  mask: url('your-icon.svg') no-repeat center / contain;
}

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

• 优点：引用方式和img接近，代码简洁，不需要JS逻辑
• 缺点：仅支持单色图标，无法实现多色SVG的分区域样式控制，低版本浏览器需要加webkit前缀兼容

方案4：SVG雪碧图+<use>引用方案（适合多图标项目） #

如果项目中存在大量SVG图标，可以将所有SVG整合为一份SVG雪碧图，通过<use>标签引用对应图标的ID，这种方式下SVG节点同样属于当前DOM上下文，支持外部CSS直接控制样式。
示例代码：

<svg class="custom-icon" width="24" height="24" aria-hidden="true">
  <use href="#icon-arrow" />
</svg>

• 优点：适合批量管理图标，复用性强，支持CSS控制样式
• 缺点：需要提前构建整合SVG雪碧图，有一定的工程化配置成本

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