svg中fill="var(--color)"不生效是因为var()是css函数，而fill属性属于html属性，二者解析机制不同；必须内联svg并移除内联fill/stroke，通过css规则如.icon path{fill:var(--icon-color,currentcolor)}控制颜色。
为什么fill="var(--color)"在SVG里完全不生效
浏览器根本不解析 HTML 属性值里的 var() 函数，fill="var(--color)" 被当作文本字符串处理，等价于写了个非法颜色值，结果退为默认黑或透明。这不是变量没定义、也不是 CSS 写错，是语法层就不支持——SVG 的 fill 属性属于 HTML attribute，而 var() 是 CSS property 机制，二者不在同一解析路径上。
必须内联 SVG 并清除所有内联 fill/stroke
只有把 SVG 源码直接贴进 HTML（即内联），<path></path> 才是可被 CSS 选中的 DOM 元素；用 <img src="icon.svg"> 或 background-image 引入的 SVG，CSS 对其内部结构完全无感。
- 逐个删掉
<path></path>、<circle></circle>、<rect></rect>上的fill和stroke属性（保留viewBox、d、width等结构属性） - 导出时勾选 “移除内联样式”（Figma/Illustrator 支持），或用正则批量替换
fill="[^"]*"为空 - 若某部分需固定色（如品牌红点），给对应
<path></path>加class，单独写规则，不干扰变量链路
用 var(--color, currentColor) 绑定颜色，但父容器必须有 color
currentColor 不是默认黑色，它严格继承父元素的计算后 color 值。如果父容器没设 color（哪怕只写 color: inherit;），就会退到浏览器初始值（通常是 #000000），图标可能“突然变黑”或“消失”。
- 变量定义要落在 SVG 容器上，例如：
<div class="icon" style="--icon-color: #2563eb;"><svg>...</svg></div>——:root定义在 Shadow DOM 或<style scoped></style>中不自动穿透 - 推荐写法：
.icon path { fill: var(--icon-color, currentColor); }，同时确保.icon { color: #6b7280; } - 悬停改色只需改父容器：
.icon:hover { color: #ef4444; }，无需碰path选择器
SVG 渐变色也能用 CSS 变量，但必须用 <defs></defs> + url(#id)
CSS 的 background: linear-gradient() 对 SVG 内部图形无效；渐变只能靠 SVG 自身的 <lineargradient></lineargradient> 或 <radialgradient></radialgradient>，但它们的 stop-color 和 stop-opacity 支持 var() —— 前提是写在 CSS 规则里，不能塞进属性值。
- 在
<defs></defs>里定义渐变 ID，例如：<lineargradient id="grad"><stop offset="0%" stop-color="var(--grad-start, #3b82f6)"></stop><stop offset="100%" stop-color="var(--grad-end, #8b5cf6)"></stop></lineargradient> - 然后用
fill="url(#grad)"应用（这是唯一合法写法，fill: url(#grad)在 CSS 里无效） - 变量必须定义在祖先元素上，且需注意：渐变本身不继承
currentColor，stop-color无法简写成currentColor，必须显式绑定变量
<svg></svg> → <path></path>，确认 computed style 里 fill 确实来自你写的那条 CSS 规则，而不是被内联属性、更高优先级选择器或 Shadow DOM 截断了。任何想跳过这步、靠“套个 class 就变色”的做法，都会在换主题或加新组件时崩掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
