fill="var(--color)" 不生效是因为 svg 的 fill 是 xml 属性，不解析 css 函数；必须用 css 声明 fill: var(--color); 才有效。
为什么 fill="var(--color)" 在 SVG 里完全不生效
因为 fill 是 SVG 的 XML 属性，不是 CSS 属性；var(--color) 只能在 CSS 声明块里被解析（如 fill: var(--color);），写在 HTML/XML 属性值中属于无效语法，浏览器直接忽略，回退到默认色（通常是黑色或透明）。
<use href="#icon"></use> 引用的 <symbol></symbol> 能读取 CSS 变量吗
能，但有严格前提：
-
<symbol id="icon"></symbol>必须定义在当前页面 DOM 中（比如放在<svg style="display:none"></svg>里），不能藏在外部文件或<template></template>中 -
<symbol></symbol>内部所有<path></path>等元素**不能带内联fill属性**（如fill="#000"），否则会覆盖 CSS 规则 - 变量必须定义在
<use></use>元素或其任意祖先上，:root定义的变量在 Shadow DOM 或 scoped 样式中可能不可见 - 推荐写法：
<span class="icon" style="--icon-color: #2563eb"><use href="#check"></use></span>，再配 CSS：.icon use path { fill: var(--icon-color, currentColor); }
如何让多个 <path></path> 分别响应不同变量
单个 <path></path> 无法拆解颜色，必须拆成独立元素：
- 用 Figma/Illustrator 导出时勾选「分离形状」或「展开复合路径」，确保每个区域是单独的
<path class="head"></path>、<path class="body"></path> - 删掉所有原始
fill属性，改用 CSS 控制：.head { fill: var(--color-head, #ef4444); } .body { fill: var(--color-body, #3b82f6); } - 变量定义位置要匹配作用域：如果图标在 Vue 组件里，
:deep(.icon) { --color-head: red; }比写在:root更可靠 - 避免用
currentColor实现多色——它只能传一个计算值，没法区分 head/body
变量未定义时图标变空白？这是最常被忽略的失效点
没设 fallback 的 fill: var(--icon-color) 在变量缺失时返回 unset，导致路径无填充、视觉消失。线上主题切换失败、组件复用时变量漏传，90% 的“图标不见了”都源于此。
- 强制加降级：
fill: var(--icon-color, currentColor)—— 变量未定义时自动取父元素color值 - 父容器必须有明确
color（哪怕只是color: inherit），否则回退到浏览器默认黑，暗色模式下可能不可见 - 打开开发者工具，逐层点开
<svg> → <path></path></svg>，确认 computed style 中的fill确实来自你写的那条 CSS 规则，而不是被内联属性、更高优先级选择器或 Shadow DOM 截断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
