fill="var(--color)"在SVG中不生效，因为浏览器不解析HTML属性中的CSS变量，将其视为非法字符串而退为默认色；必须内联SVG、清除内联fill/stroke，通过CSS规则如.icon path{fill:var(--icon-color,currentColor)}控制，并确保父容器定义color。
为什么直接写 fill="var(--color)" 在 SVG 里完全不生效
浏览器压根不解析 HTML 属性值里的 var() 函数，fill="var(--color)" 被当作文本字符串处理，等价于填了个非法颜色值，结果退为默认黑或透明。这不是变量没定义，是语法层就不支持——fill 是 HTML attribute，而 var() 是 CSS property 机制，二者不在同一解析路径上。
必须内联 SVG 并清除所有内联 fill/stroke
只有把 SVG 源码直接贴进 HTML（即内联），<path></path> 才是可被 CSS 选中的 DOM 元素；用 <img src="icon.svg" alt="怎么用CSS过渡让复杂SVG图标实现平滑变色？" > 或 background-image 引入的 SVG，CSS 对其内部结构完全无感。
- 逐个删掉
<path></path>、<circle></circle>、<rect></rect>上的fill和stroke属性（保留viewBox、d、width等结构属性） - 导出时勾选 “移除内联样式”（Figma/Illustrator 支持），或用正则批量替换
fill="[^"]*"为空 - 若某部分需固定色（如品牌红点），给对应
<path></path>加class，单独写规则，不干扰变量链路
用 CSS 规则绑定 color + currentColor 实现过渡
currentColor 不是默认黑色，它严格继承父元素的计算后 color 值。如果父容器没设 color（哪怕只写 color: inherit;），就会退到浏览器初始值（通常是 #000000），图标可能“突然变黑”或“消失”。
- 变量定义要落在 SVG 容器上，例如：
<div class="icon" style="--icon-color: #2563eb;"><svg></svg></div> - 推荐写法：
.icon path { fill: var(--icon-color, currentColor); }，同时确保.icon { color: #6b7280; } - 悬停改色只需改父容器：
.icon:hover { color: #ef4444; }，无需碰path选择器 - 过渡必须显式声明：
.icon { transition: color 0.25s ease; }，transition: all不生效
多色 SVG 图标怎么分别控制 hover 颜色
如果一个 SVG 包含多个 <path></path> 且原本颜色不同（比如红蓝两色 logo），不能只靠 currentColor 统一变色。此时需给各路径加 class，再分别定义 hover 状态。
立即学习“前端免费学习笔记（深入）”；
- 原始 SVG 中给关键路径加
class：<path class="primary" d=""></path>、<path class="secondary" d=""></path> - CSS 中分开控制：
.icon:hover .primary { fill: #007bff; }、.icon:hover .secondary { fill: #6c757d; } - 避免用
path:nth-child(1)这类结构选择器——SVG 结构稍一调整就失效 - 每个
fill变化都要单独加transition，例如：.icon .primary { transition: fill 0.25s ease; }
currentColor，但不支持在 <svg></svg> 根元素上设 color 来影响子元素 fill；另外，Safari 下 stroke 变色可能闪烁，建议换用 stroke-opacity + 固定色。 
