内联SVG时fill不生效的主因是源码含高优先级内联fill属性，需手动清除；img引入的SVG无法用CSS控制fill，应改用内联SVG、mask-image或组件化方案。
内联SVG时fill不生效的常见原因
最常遇到的问题是：写了 .icon path { fill: red; }，但图标颜色完全没变。根本原因几乎都是 SVG 源码里自带了 fill="#000" 这类内联属性——它优先级高于 CSS，直接覆盖掉你的样式。
解决办法很简单：
- 手动删掉所有
path、circle、rect等子元素上的fill、stroke属性（保留viewBox、d、width等结构属性） - 确保
<svg>标签本身也没有style="fill: ..."这种内联样式 - 如果用 Figma / Illustrator 导出，勾选“清除颜色属性”或导出后批量替换
fill="[^"]*"为空
为什么不能对 <img src="icon.svg"> 用 CSS 控制 fill
<img> 加载的 SVG 是独立文档上下文，DOM 完全隔离。你写的 img path { fill: red; } 根本不会匹配到任何节点，浏览器压根不解析其内部结构。
这时候有三个实际可行的选择：
立即学习“前端免费学习笔记（深入）”；
- 改用内联 SVG：把 SVG 源码直接粘进 HTML，这是最轻量、兼容性最好、支持
currentColor和transition的方案 - 用
mask-image+ 背景色模拟换色：.icon { background-color: currentColor; mask-image: url(icon.svg); -webkit-mask-image: url(icon.svg); }，但只适用于单色图标，且不支持描边、渐变等复杂效果 - 构建时用 SVGR 或类似工具自动转成 React/Vue 组件，避免手动处理内联逻辑
用 currentColor 实现主题联动的关键细节
currentColor 不是魔法，它只继承父元素的 color 计算值，和 background-color、border-color 完全无关。很多人卡在这一步：给按钮设了 background-color: #007bff，却指望图标跟着变蓝——不行，必须显式设置 color: #007bff。
几个容易被忽略的点：
- 父容器哪怕只写
color: inherit;也够用，不必非得写死颜色值 - IE 不支持
fill: currentColor，Edge 12+ 才开始支持；需要兼容 IE 时，得 fallback 到 JS 注入或预设类名（如.icon-blue） - 伪元素（
::before）里用content: url(icon.svg)时，currentColor失效——因为不是内联 SVG，没有 DOM 节点参与样式计算
多色图标或固定区域如何处理
纯 currentColor 只能实现单色联动。如果图标本身要双色（比如品牌红 + 灰色描边），或者某一部分必须固定为红色（如心形图标中心），就得拆开控制：
- 给需要固定色的
<path>加 class，例如<path class="brand-fill" d="...">，再单独写.brand-fill { fill: #e53935; } - 描边统一用
stroke: currentColor，但前提是原始 SVG 里没写死stroke属性，否则一样被覆盖 - 避免用
svg * { fill: ... }，会误伤<text>、<tspan>等不支持fill的元素，导致渲染异常甚至布局错乱
真正难的不是写对那行 fill: currentColor，而是从设计交付、导出设置、构建流程到运行时注入，整条链路上都得保持对内联属性的“洁癖”。稍有疏忽，比如开发时本地测试正常，上线后构建工具自动加了 fill="#000"，问题就藏得极深。
