如何通过CSS fill属性实现鼠标滑过SVG图标颜色变化？

本文共计663个文字，预计阅读时间需要3分钟。

只有SVG以

常见错误现象：写了.icon:hover { fill: red; }但颜色死活不变——大概率是SVG没内联，或者内联后路径上写了fill="black"这种内联样式，它优先级高于外部CSS。

• 确保SVG代码直接嵌入HTML，不是引用文件
• 删掉SVG内部所有fill、stroke等内联样式，或改用fill="currentColor"让其继承文本色
• 给SVG容器加class（如class="icon"），不要依赖svg:hover这种宽泛选择器

:hover伪类里fill值必须显式声明

CSS不会自动“推断”你想要什么颜色，fill默认是currentColor（继承父元素color），但:hover时必须重新指定值，否则没变化。很多人漏写这一步，只写了transition却没写实际要变的颜色。