SVG内联时fill不生效或悬停无反应，根本原因是未真正内联（如用引入），导致DOM不可访问；须将SVG XML代码直接嵌入HTML，并确保fill值明确、transition写在基础状态且作用于子元素。
SVG内联时fill不生效或悬停无反应
直接写 fill 但没效果？大概率是 SVG 被当作外部资源（比如 <img src="icon.svg" alt="CSS如何让SVG图标在悬停时变色_使用transition过渡fill属性" >）引入了。这种情况下 DOM 不可访问，CSS 无法控制 fill，transition 更无从谈起。
必须用内联方式：把 SVG 的 XML 内容直接贴进 HTML，例如复制粘贴 <svg>...</svg>。只有这样，里面的 <path></path>、<circle></circle> 才能被 CSS 选中。
- 检查浏览器开发者工具里，图标元素是否在 DOM 树中真实存在（而不是一个孤立的
<img alt="CSS如何让SVG图标在悬停时变色_使用transition过渡fill属性" >） - 如果用了构建工具（如 Webpack），确认 SVG loader 没有默认转成
url()或<img alt="CSS如何让SVG图标在悬停时变色_使用transition过渡fill属性" > - 避免用
background-image方式塞 SVG，同样无法控制内部形状
:hover + transition fill 不动，但颜色却变了
颜色变了但没有过渡动画？常见原因是没给初始 fill 值，或者写了 fill: currentColor 却没设父元素颜色。
transition 只对“可计算的数值变化”起作用，而 fill 是颜色属性，必须两端都有明确颜色值（比如 #000 → #3b82f6），不能一端是 inherit 或未声明。
立即学习“前端免费学习笔记（深入）”；
- 确保 SVG 元素或其子元素（如
<path></path>）有显式fill，例如：fill="#6b7280" - 过渡要写在基础状态上，不是只写在
:hover里：svg path { fill: #6b7280; transition: fill 0.2s ease; } - 如果想继承文字色，统一用
fill: currentColor，并保证父容器（如<a></a>）设置了color
使用currentColor让图标随文字一起变色
这是最灵活也最省维护成本的方式——不用硬编码颜色，也不用重复写多套 hover 规则。
原理很简单：SVG 内部设 fill="currentColor"，然后靠父级文字颜色驱动。hover 时只需改父元素的 color，图标自动同步。
- 内联 SVG 中，给
<svg></svg>或具体图形标签加fill="currentColor"（注意是属性，不是 CSS） - 父容器（如
<button></button>或<a></a>）设置正常色和 hover 色：a { color: #6b7280; } a:hover { color: #3b82f6; } - 务必移除其他干扰的
fillCSS，否则会覆盖currentColor - 兼容性没问题，
currentColor在所有现代浏览器包括 IE9+ 都支持
transition fill 失效的隐藏原因：fill 不是可动画属性？
它其实是可动画的，但有两个冷门限制容易踩坑：
- SVG 元素必须有明确的
fill值（哪怕只是fill="none"），空着或fill="inherit"会导致过渡中断 - 如果 SVG 含有
fill-rule、clip-path或mask，某些浏览器（尤其是 Safari）可能跳过 fill 过渡 - 不要对整个
<svg></svg>标签设transition，而是精确到<path></path>、<circle></circle>等子元素 - 调试时可临时加
outline: 1px solid red确认选中的是目标元素，不是外层容器
真正卡住的时候，先看是不是 SVG 没内联；再查 fill 有没有被其他样式覆盖；最后确认 transition 写在了正确的位置、且两端颜色都明确。这些点比调 easing 函数重要得多。
