如何通过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却没写实际要变的颜色。

示例正确写法：

立即学习“前端免费学习笔记（深入）”；

.icon { width: 24px; height: 24px; color: #666; transition: fill 0.2s; } .icon:hover { color: #007bff; } .icon path { fill: currentColor; }

注意：path等子元素的fill必须设为currentColor，才能随color变化而变；单独对.icon:hover设fill无效，因为fill不继承，得作用在具体形状上。

多色SVG图标需要逐个控制fill

如果一个SVG包含多个<path>且原本颜色不同（比如红蓝两色logo），不能只靠currentColor统一变色。此时需给各路径加class，再分别定义hover状态。

• 原始SVG中给关键路径加class：<path class="primary" d="...">、<path class="secondary" d="...">
• CSS中分开控制：.icon:hover .primary { fill: #007bff; }、.icon:hover .secondary { fill: #6c757d; }
• 避免用path:nth-child(1)这类结构选择器——SVG结构稍一调整就失效

IE11及旧版Edge对currentColor的支持有坑

IE11支持currentColor，但不支持在<svg>根元素上设color来影响子元素fill（即svg { color: red; } + path { fill: currentColor; }在IE11里不生效）。解决方案是把color设在SVG的父容器上，并确保该容器是行内元素（如<span>）。

兼容写法示例：

<span class="icon-wrapper"> <svg class="icon">...</svg> </span> .icon-wrapper { color: #666; } .icon-wrapper:hover { color: #007bff; } .icon path { fill: currentColor; }

这个模式在IE11、Edge 17–18、Chrome、Firefox里都稳定。真正容易被忽略的是：别指望在<div>上设color再让SVG里的fill: currentColor生效——div默认不是行内上下文，currentColor会退回到初始值。