怎么用CSS过渡让复杂SVG图标实现平滑变色？-css教程-PHP中文网

fill="var(--color)"在SVG中不生效，因为浏览器不解析HTML属性中的CSS变量，将其视为非法字符串而退为默认色；必须内联SVG、清除内联fill/stroke，通过CSS规则如.icon path{fill:var(--icon-color,currentColor)}控制，并确保父容器定义color。

怎么用css过渡让复杂svg图标实现平滑变色？

为什么直接写 fill="var(--color)" 在 SVG 里完全不生效

浏览器压根不解析 HTML 属性值里的 var() 函数，fill="var(--color)" 被当作文本字符串处理，等价于填了个非法颜色值，结果退为默认黑或透明。这不是变量没定义，是语法层就不支持——fill 是 HTML attribute，而 var() 是 CSS property 机制，二者不在同一解析路径上。

必须内联 SVG 并清除所有内联 fill/stroke

只有把 SVG 源码直接贴进 HTML（即内联），才是可被 CSS 选中的 DOM 元素；用或 background-image 引入的 SVG，CSS 对其内部结构完全无感。

逐个删掉、、上的 fill 和 stroke 属性（保留 viewBox、d、width 等结构属性）
导出时勾选 “移除内联样式”（Figma/Illustrator 支持），或用正则批量替换 fill="[^"]*" 为空
若某部分需固定色（如品牌红点），给对应加 class，单独写规则，不干扰变量链路

用 CSS 规则绑定 color + currentColor 实现过渡

currentColor 不是默认黑色，它严格继承父元素的计算后 color 值。如果父容器没设 color（哪怕只写 color: inherit;），就会退到浏览器初始值（通常是 #000000），图标可能“突然变黑”或“消失”。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

变量定义要落在 SVG 容器上，例如：
推荐写法：.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 包含多个且原本颜色不同（比如红蓝两色 logo），不能只靠 currentColor 统一变色。此时需给各路径加 class，再分别定义 hover 状态。

原始 SVG 中给关键路径加 class：、
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; }