fill="var(--color)"无效是因为SVG的HTML属性不解析CSS变量，仅接受字面值或关键字；正确做法是清除内联颜色属性，通过CSS规则用var()控制，且变量需定义在祖先元素上。
必须用 CSS 规则引用 var()，不能写在 SVG 的 fill 属性里；fill="var(--color)" 完全无效，浏览器当字符串忽略。
为什么 fill="var(--color)" 不起作用
SVG 元素的 HTML 属性（如 fill、stroke）不解析 CSS 变量，只接受字面值或关键字（如 currentColor）。你写 <path fill="var(--primary)">，浏览器就照单全收，把它当普通文本，最终按默认色渲染（通常是黑色）。
- ✅ 正确做法：删掉所有内联
fill/stroke，改用 CSS 规则控制 - ❌ 错误做法：保留
fill="#000"或fill="var(--c)"，指望 CSS 覆盖 - ⚠️ 注意：
viewBox、d、class这类结构属性可以保留，颜色相关属性一律清空
var(--color) 必须定义在祖先元素上，不是 :root 就万事大吉
CSS 变量作用域是继承链，不是全局广播。如果 SVG 嵌在 Vue/React 组件或 Shadow DOM 里，:root 定义的变量默认不可见。
- 推荐写法：
<div class="icon-btn" style="--icon-fill: #3b82f6;"><svg><path class="fill-me"></svg></div> - CSS 规则写成：
.icon-btn .fill-me { fill: var(--icon-fill, currentColor); } - 不要只依赖
:root { --icon-fill: red; }，除非你明确加了前缀选择器如:root .icon svg path { fill: var(--icon-fill); } - 变量名带组件前缀（如
--btn-icon-fill）可避免跨组件覆盖
多色图标必须拆路径 + 分别绑定变量
一个 <path> 只能有一个 fill，哪怕它的 d 属性里有多个闭合子路径（比如 MZ MZ），浏览器也视为整体填色。想头部红、身体蓝，就得拆开。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 导出时启用 Figma/Illustrator 的「分离形状」或「取消编组」，避免路径合并
- 给不同区域加不同 class：
<path class="head"><path class="body"> - CSS 分别控制：
.head { fill: var(--head-color); } .body { fill: var(--body-color); } - 别用
currentColor混搭var()：fill: var(--c, currentColor)可行，但currentColor本身不响应var()变化，二者逻辑独立
JS 动态改色只能操作 style.setProperty，不是直接改 fill
想 runtime 切主题？别碰 DOM 的 fill 属性，也别用 element.style.fill = "red"——这会覆盖 CSS 变量，且无法响应后续变量更新。
- ✅ 正确方式：
document.querySelector('.icon-btn').style.setProperty('--icon-fill', '#ef4444'); - ❌ 错误方式：
svg.querySelector('path').setAttribute('fill', 'red');或path.style.fill = 'red'; - 变量未定义时 fallback 仍生效：
fill: var(--icon-fill, #6b7280)，JS 改变量后自动刷新 - 注意：改的是容器元素的变量，不是 SVG 本身——因为变量必须在祖先上定义才有效
真正卡住人的从来不是语法，而是 SVG 是否内联、内联后有没有清掉原始 fill、变量是否落在正确的作用域节点上——这三步漏任何一步，var() 都只是摆设。
