SVG内联是CSS变量生效的前提，必须将SVG源码直接嵌入HTML形成结构；fill="var(--color)"在SVG属性中无效，需在CSS中通过.svg path { fill: var(--icon-color); }设置。
SVG内联是CSS变量生效的前提
用 <img src="icon.svg" alt="如何在CSS中使用自定义属性控制SVG图标颜色？" > 或 background-image: url(icon.svg) 引入的 SVG，var(--color) 完全无效——它被当位图加载，DOM 里没有 <path></path> 可选中。必须把 SVG 源码直接粘进 HTML，形成 <svg><path></path></svg> 结构。
常见错误现象：.icon svg { fill: var(--icon-color); } 写了但没反应，八成是 SVG 没内联，或者用了 <use href="sprite.svg#icon"></use> 但 <symbol></symbol> 在外部文件里。
- ✅ 正确：复制 SVG 文件内容，粘贴为纯 HTML 片段
- ✅ 可选：
<object></object>加载，但有跨域和样式隔离风险 - ❌ 避免：
<img alt="如何在CSS中使用自定义属性控制SVG图标颜色？" >、<picture></picture>、CSSbackground
fill="var(--color)" 在 SVG 标签里不工作
fill="var(--color)" 这种写法放在 HTML 的 <svg></svg> 或 <path></path> 属性里，浏览器直接忽略——SVG 属性值不解析 CSS 变量。变量只能在 CSS 规则中使用。
正确路径是：清空所有内联 fill/stroke，然后在 CSS 中显式作用于子元素。
立即学习“前端免费学习笔记（深入）”；
- 删掉 SVG 源码里所有
fill="#000"、stroke="red"、style="fill:..." - 保留
viewBox、d、width等结构属性 - CSS 中写：
.icon svg path { fill: var(--icon-color); }，不是svg { fill: ... }
:root 定义变量 + 组件级覆盖更可控
全局变量适合基础色，但按钮、禁用态、深色模式等场景需要局部覆盖。直接改 :root 会影响所有图标，而组件级类名能精准控制。
推荐分层写法：
:root {
--icon-color: #3b82f6;
}
.btn-icon {
--icon-color: #007bff;
}
.btn-icon:disabled {
--icon-color: #9ca3af;
}
.icon svg path {
fill: var(--icon-color, currentColor);
}
-
var(--icon-color, currentColor)提供 fallback，避免变量未定义时变黑 - 深色模式可加：
:root[data-theme="dark"] { --icon-color: #9ca3af; } - 多色图标需给不同
<path></path>加 class，如<path class="bg"></path>和<path class="accent"></path>，再分别设变量
hover 和 disabled 状态别只改父元素 color
仅写 .icon:hover { color: red; } 不会让图标变色——currentColor 是继承关系，但 fill 不自动响应伪类变化；而 CSS 变量本身也不触发重计算。
必须显式写出状态下的变量值或颜色值：
- 用变量：
.icon:hover svg path { --icon-color: #dc3545; } - 用具体值：
.icon:disabled svg path { fill: #9ca3af; } - 禁用态慎用
opacity，它会让整个 SVG（含描边、文字）一起变淡，破坏可读性
最易被忽略的一点：父容器没设 color，currentColor 就取浏览器默认黑色；哪怕只是 color: inherit;，也比什么都不写强。变量方案虽灵活，但每处调用都得确认作用域是否可达——shadow DOM 或 scoped style 下可能失效。
