SVG中fill="var(--color)"无效，因HTML属性不解析CSS变量；须改用CSS选择器绑定，清除内联样式，内联SVG并确保父元素定义color或CSS变量。
fill="var(--color)"在SVG里根本不会解析
这不是变量没定义，也不是CSS写错，而是浏览器压根不处理HTML属性值里的var()。SVG的fill、stroke等是HTML attribute，而var()属于CSS property机制，二者不在同一解析层。你写fill="var(--color)"，浏览器就当普通字符串渲染，等价于fill="var(--color)"——非法值，退为默认黑或透明。
常见现象：fill在开发者工具里被划掉，但“Computed”面板里根本没值；改了:root { --color: red; }，图标还是黑的；用<img src="icon.svg">引入，再怎么写CSS都无效。
必须用CSS选择器绑定，且清除所有内联颜色
真正起效的方式是把颜色控制逻辑从HTML属性移到CSS规则中，并确保没有更高优先级的内联样式干扰：
- 删掉所有
<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不是“默认黑色”，它是严格继承的
var(--icon-color, currentColor)看似保险，但currentColor不是兜底色，而是父元素color的计算值。如果父容器没设color（哪怕只是color: inherit;），它就会退到浏览器初始值（通常#000000），导致图标“突然变黑”或“消失”。
立即学习“前端免费学习笔记（深入）”；
安全做法：
- 给图标容器加一层明确的
color，例如：.icon { color: #6b7280; } - hover时只需改这层：
.icon:hover { color: #ef4444; } - 含描边时别漏掉：
.icon path { stroke: var(--icon-color, currentColor); } - 多色图标必须拆成多个
<path>并分别加class，单个<path>无法局部换色
Firefox对stroke-dasharray中CSS变量运算支持不全
在用stroke-dasharray画饼图等动态SVG图形时，若在CSS里写--array: calc(3.14 * 2 * var(--inputnum) / var(--inputtotal)), calc(3.14 * 2 - var(--array1));，Firefox会报错或静默失效——它不支持var()嵌套在calc()中参与二次运算。
可行方案：
- JS端一次性算好两个值，直接设
style.setProperty('--array1', '12.56')和--array2，避免CSS层运算 - 用
transform: rotate()配合固定stroke-dasharray做角度控制，绕过数值计算 - 若必须CSS驱动，改用
@property声明受控变量（仅Chrome/Edge 105+、Safari 16.4+支持，Firefox暂不支持）
最易忽略的一点：currentColor是否真有值，比变量有没有定义更关键；而Firefox对var()在calc()中的链式调用，至今没有统一行为。
