内联 SVG 是前提， 完全无效；CSS 变量控制 SVG 颜色仅对内联 SVG 生效， 因上下文隔离无法穿透样式；fill/stroke 行内属性优先级高于 CSS，需清除或设为 none；推荐导出时移除内联样式，并为各路径添加 class 分别绑定变量；currentColor 不响应 var() 变化，二者不可混用；多色图标须拆分为独立 path 并分别设 class；JS 动态改色应操作 style.setProperty 设置变量而非直接改 fill。
内联 SVG 是前提，<img alt="如何通过CSS变量控制SVG组件的填充颜色与描边？" > 完全无效
所有 CSS 变量控制 SVG 颜色的方案，都只对内联 SVG（即直接写在 HTML 中的 <svg></svg>）生效。<img src="icon.svg" alt="如何通过CSS变量控制SVG组件的填充颜色与描边？" > 是独立文档上下文，CSS 变量、currentColor、外部样式表全部隔离，无法穿透。常见错误是把图标打包成单独文件再用 <img alt="如何通过CSS变量控制SVG组件的填充颜色与描边？" > 引入，却指望 fill: var(--primary) 起作用——它根本不会解析。
fill 和 stroke 必须显式声明，且不能有内联属性覆盖
SVG 元素若自带 fill="#000" 或 stroke="red" 这类行内属性，它们的优先级高于 CSS，fill: var(--color) 会被忽略。必须手动删掉或改写为 fill="none"、stroke="none"。
- 推荐做法：导出 SVG 时勾选「移除内联样式」或「清除属性」，Figma / Illustrator 都支持
- 路径级控制需每个
<path></path>单独加 class，例如<path class="icon-fill"></path>，再配.icon-fill { fill: var(--fill-color); } - 描边同理：
<path class="icon-stroke"></path>+.icon-stroke { stroke: var(--stroke-color); }
变量必须定义在可继承作用域，currentColor 不等于 var()
currentColor 是一个颜色关键字，只继承当前元素的 color 计算值，它不响应 CSS 自定义属性变化；var(--color) 是变量引用，必须被显式定义且作用域可达。二者不能混用替代。
- 变量要写在祖先元素上，比如
<div style="--fill-color: #3b82f6;"><svg>...</svg></div>，不能只放在:root就指望所有 SVG 自动读取（除非你明确用:root .icon svg path { ... }） - 想兼顾 fallback 和主题适配，写成
fill: var(--fill-color, currentColor)—— 变量未定义时回退到文字色 -
color属性本身不接受var(--text-color)作为合法值，除非你写color: var(--text-color, #1f2937)，且该变量必须是颜色值
多色图标必须拆路径，单个 <path></path> 无法分区域填色
SVG 的 fill 作用于整个 <path></path> 元素，哪怕它的 d 属性里包含多个闭合子路径（如 MZ MZ），浏览器也视为一个整体。想让头部红、身体蓝，就得拆成两个独立 <path></path> 并分别加 class。
立即学习“前端免费学习笔记（深入）”；
- 导出时启用「分离形状」或「展开复合路径」，避免合并路径
- 检查 DOM：每个待变色区域应有唯一 class，如
<path class="head"></path>、<path class="body"></path> - CSS 写法：
.head { fill: var(--head-color); } .body { fill: var(--body-color); } - JS 动态改色时，操作的是
element.style.setProperty('--head-color', '#ef4444')，不是直接改fill
viewBox 是否合理、以及变量定义位置是否匹配选择器作用域——这三个点出问题，var() 就会静默失效，连报错都没有。 
