只有内联SVG才能用CSS3动态改fill，需满足三条件：路径为独立DOM元素、fill为确定颜色（非url或none）、transition写在路径上；常见失效原因包括SVG加载方式错误（如img引入）、transition误加在父容器、fill值不匹配或未加!important。
只有内联 SVG 才能用 CSS3 动态改 fill，且必须满足三个硬性条件：路径得是独立 DOM 元素、fill 值得是确定颜色（不能是 url(#gradient) 或空值）、transition 得写在路径本身上。
为什么 fill transition 不生效？
最常见原因是 SVG 加载方式错了——用 <img src="icon.svg"> 或 background-image 引入的 SVG，浏览器根本不把它当 DOM 解析，<path> 根本不存在，CSS 选不到也动不了。另一个高频坑是把 transition: fill 0.3s 写在 <svg> 标签上，但实际要动画的是 <path>，父容器加没用。
-
<img>/background-image→ 完全不可控，改用内联或<use>引用页面内定义的<symbol> - 内联 SVG 中写了
fill="currentColor"→ 可以过渡，但得给父容器加transition: color，不是fill - 路径用了
fill="url(#a)"或fill="none"→transition直接失效，前者不支持动画，后者没有起始色值
path[fill="#264d99"] 这类选择器怎么写才可靠？
属性选择器是第三方图表库生成无 ID、无 class 的 SVG 时最稳的方案，但细节决定成败：
- 值必须完全一致：
path[fill="#264d99"]不匹配#264D99（大小写敏感）、"#264d99 "（尾部空格）、rgb(38, 77, 153)（格式不同） - 务必加
!important：内联fill属性优先级高于普通 CSS 规则，不加很可能被忽略 - 别用
path:nth-child(1)：SVG 结构稍一变动（比如插件加了<g>包裹层），选择器就断掉
多颜色批量替换可合并写：path[fill="#264d99"], path[fill="#a52b0e"] { fill: #007bff !important; }
立即学习“前端免费学习笔记（深入）”；
如何让 SVG 图标随文字主题自动变色？
用 currentColor 是最轻量的动态方案，但它不是“自动继承”，而是需要显式声明：
- 路径上必须写
fill="currentColor"（不能只靠 CSS 设置，否则初始状态不生效） - 颜色控制点得设在 SVG 的直接父容器上，比如
<span class="icon"><svg>...</svg></span>，然后.icon { color: #3b82f6; } - IE11 不支持
<svg>根元素设color影响子fill，必须把color放在<span>这类行内容器上 - hover 动画要写在父容器：
.icon { transition: color 0.2s; } .icon:hover { color: #ef4444; }
真正容易被忽略的点是：SVG 导出工具常把 #ff0000 写成 red，或塞进 fill-rule="evenodd" 这类干扰属性，导致 CSS 选择器失灵；上线前用 svgo --convert-colors 统一转成十六进制，再手动删掉冗余属性，比现场调试省半小时。
