fill="var(--color)"在SVG中无效，因浏览器不解析HTML属性中的CSS变量；须改用CSS规则绑定var()，清除所有内联fill/stroke，确保SVG内联、父容器设color，并用currentColor作fallback。
fill="var(--color)" 在 SVG 标签里完全不生效——浏览器压根不解析 HTML 属性值中的 CSS 变量，它只当普通字符串处理。
为什么内联写 fill="var(--color)" 没反应
这不是变量没定义、也不是 CSS 写错，而是语法层面被忽略。SVG 元素的 fill、stroke 等属性值属于 HTML 属性（attribute），而 var() 是 CSS 自定义属性（property）机制，二者不在同一解析层。浏览器遇到 fill="var(--color)" 时，不会去查找变量，直接按字面量渲染，结果等价于 fill="var(--color)" —— 非法值，退为默认色（通常是黑或透明）。
常见错误现象：
- 图标颜色始终不变，开发者工具里看到
fill属性被 strike-through，但实际计算样式里没值 - 改了
:root { --color: red; }，图标还是黑的 - 用
<img src="icon.svg">引入，再怎么写 CSS 都无效
必须用 CSS 规则绑定 var()，且清除内联颜色
真正起作用的方式是：把颜色控制逻辑从 HTML 属性移到 CSS 选择器中，并确保 SVG 路径没有更高优先级的内联 fill 或 stroke 干扰。
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
<path>、<circle>、<svg>上的fill、stroke和style属性（保留viewBox、d等结构属性） - SVG 必须是内联写法：
<svg><path></path></svg>，不是<img>、<use>（除非<symbol>在当前 DOM）、也不是 background-image - 用明确选择器绑定变量，例如：
.icon path { fill: var(--icon-color, currentColor); } - 变量必须定义在祖先元素上，比如
<div class="header" style="--icon-color: #1e40af"><svg>...</svg></div>；仅写:root定义，在 Shadow DOM 或 scoped 样式里不自动继承
currentColor 是最稳 fallback，但父容器 color 必须有值
var(--icon-color, currentColor) 看似保险，但 currentColor 不是“默认黑色”，它是严格继承父元素的 color 计算值。如果父容器没设 color（哪怕只是 color: inherit;），它就会退到浏览器初始值（通常为 #000000），导致图标“突然变黑”或“消失”。
- 给图标容器加一层明确的
color，例如：.icon { color: #6b7280; }，hover 时只需改这层：.icon:hover { color: #ef4444; } - 暗色模式兼容靠这个链路天然生效：
@media (prefers-color-scheme: dark) { :root { color: #e2e8f0; } } - 如果图标含描边，别漏掉：
.icon path { stroke: var(--icon-color, currentColor); } - 多色图标必须拆成多个
<path>并分别加 class，单个<path>无法局部填色
构建工具和导出设置容易悄悄破坏这套逻辑
很多团队用 Figma / Illustrator 导出 SVG，或通过 SVGR、vite-plugin-svg 等工具自动引入，这些流程默认会保留原始 fill="#000" 或把 currentColor 替换为硬编码值，导致变量失效。
- Figma / AI 导出时勾选「移除内联样式」或「清除颜色属性」
- SVGR 配置加
svgoConfig: { plugins: [{ name: 'removeAttrs', params: { attrs: ['fill', 'stroke'] } }] } - Vite 中若用
import Icon from './icon.svg?inline'，确认 loader 没启用replaceAttrValues（默认 true，会把currentColor转成具体色值） - React/Vue 组件传色值时，用
style={{ '--icon-color': color }}，并加 fallback：color: #666; color: var(--icon-color);
最容易被忽略的是：SVG 不是图片，它是 DOM 节点。你得打开开发者工具，逐层检查 fill 是否被内联属性挡住、computed 样式里 fill 值是否来自 var()、祖先节点的 color 是否真的有计算值——跳过这步，所有变量方案都会在某个上线前夜失效。
