fill="var(--color)"在SVG中不生效，因SVG属性值不解析CSS变量；多色图标需为各路径设class并用CSS变量分别控制，变量须定义在祖先容器上。
为什么fill="var(--color)"在多色SVG里完全不生效
这不是变量没定义，也不是选择器写错——浏览器压根不解析 HTML 属性值里的 var()。SVG 的 fill、stroke 是 attribute，而 var() 是 CSS property 机制，二者不在同一解析层。你写 fill="var(--primary)"，浏览器就当普通字符串处理，等价于 fill="var(--primary)"，非法值，退为默认黑或透明。
多色图标必须拆路径 + 分别绑定变量
单个 var(--color) 控不住红蓝黄三块区域。得让每个颜色区域可独立控制：
- 给每个需独立变色的
<path>加 class，比如<path class="bg">、<path class="icon">、<path class="border"> - 删掉所有内联
fill/stroke（保留viewBox、d等结构属性） - 用明确选择器绑定变量：
.logo .bg { fill: var(--logo-bg, #fff); }、.logo .icon { fill: var(--logo-icon, #000); } - 变量必须定义在祖先容器上，例如：
<div class="logo" style="--logo-bg: #1e40af; --logo-icon: #e2e8f0"><svg>...</svg></div>
currentColor不能替代多色变量，但能简化 fallback 链路
currentColor 只继承一个 color 值，天生不适合多色场景。但它可以作为保底方案配合使用：
- 对非关键路径（如装饰性描边），可用
stroke: currentColor统一响应父级文字色 - 变量未定义时，
var(--logo-icon, currentColor)能兜住，但前提是父容器显式设了color，否则currentColor会退到浏览器初始黑 - 暗色模式下，只要父容器
color随@media (prefers-color-scheme: dark)切换，currentColor就自动生效，无需额外 JS
若依等框架里用变量换肤，要绕过组件封装陷阱
若依的 svg-icon 组件默认只透传一个 color 属性，它内部把所有 fill 强制设为 currentColor —— 这对单色图标够用，但会覆盖你写的多色变量规则。
立即学习“前端免费学习笔记（深入）”；
- 若需多色，必须弃用该组件，改用原生内联 SVG，并确保其 DOM 在当前作用域（不能藏在 Shadow DOM 或异步加载的模板里）
- Vue/React 中动态传变量：用
:style="{ '--logo-bg': theme.bg, '--logo-icon': theme.icon }"绑定到容器，CSS 中用var()消费 - 构建工具（如 vite-svg-loader）可能自动注入
fill，检查输出 HTML 是否残留内联样式；建议导出 SVG 时勾选「移除内联样式」
