svg 元素的 fill 属性不支持 var() 语法，必须清除内联 fill 并通过 css 选择器绑定变量，且变量需定义在祖先元素上；多色图标需为路径添加 class 分别控制，currentcolor 依赖父元素显式 color 值。
因为 fill="var(--color)" 这种写法在 SVG 元素上根本不会被解析——浏览器把它当普通字符串处理，不是语法错误，而是压根不进入 CSS 变量计算流程。
SVG 的 fill 属性不支持 var() 语法
HTML 属性（如 fill、stroke）和 CSS 自定义属性（--color）属于两个不同解析层。你写 <path fill="var(--color)"></path>，浏览器不会查找变量，也不会报错，只会按非法值处理，最终退为默认黑色或透明。
- 开发者工具里能看到该
fill属性被 strike-through，但 computed style 中无值 - 即使
:root { --color: red; }已正确定义，图标颜色也不变 - 这种写法在所有主流浏览器中均无效，不是兼容性问题，是规范限制
必须清除内联 fill 并改用 CSS 规则绑定
真正起效的方式是把颜色控制逻辑从 HTML 属性移到 CSS 选择器中，且确保没有更高优先级的内联样式干扰。
- 删掉所有
<path></path>、<circle></circle>、<svg></svg>上的fill、stroke和style属性（保留viewBox、d、class等结构属性） - SVG 必须是内联写法：
<svg><path></path></svg>，不能用<img src="icon.svg">或<use href="#x"></use>（除非<symbol></symbol>在当前 DOM） - CSS 写成：
.icon path { fill: var(--icon-color, currentColor); }
变量必须定义在祖先元素上，不能只靠 :root
CSS 变量作用域依赖继承链，不是全局广播。在 Vue/React 组件、Shadow DOM 或 scoped 样式中，:root 定义的变量默认不可见。
- 推荐直接在 SVG 容器上设：
<div class="icon-btn" style="--icon-color: #3b82f6;"><svg>...</svg></div> - 避免在
<svg></svg>标签上用style="--x: y"，它只作用于自身，不向下透传 - 多色图标需拆路径并分别加 class：
<path class="head"></path>+.head { fill: var(--head-color); }
currentColor 是最稳 fallback，但父容器 color 必须有值
var(--icon-color, currentColor) 看似保险，但 currentColor 不是“默认黑色”，它严格继承父元素的 color 计算值。
- 如果父容器没设
color（哪怕只是color: inherit;），currentColor就会退到浏览器初始值（通常是#000000） - 务必给容器显式设置：
.icon { color: #6b7280; }，hover 时只需改这层：.icon:hover { color: #ef4444; } - 暗色模式天然生效：只要父容器
color响应@media (prefers-color-scheme: dark)，图标就跟着变
最容易被忽略的是：SVG 是 DOM 树，不是图片。你得打开开发者工具，一层层点开 <svg> → <path></path></svg>，确认 computed style 里的 fill 确实来自你写的那条 CSS 规则，而不是被内联属性、更高优先级选择器或 Shadow DOM 截断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
