SVG内联时fill才能被CSS控制，前提为直接嵌入HTML且删去内联fill属性；用fill: currentColor可继承父元素color，:hover需显式重设color值。
SVG内联写法下fill能被CSS控制的前提
只有SVG以<svg></svg>标签直接写在HTML中（内联SVG），里面的fill属性才会响应外部CSS的:hover规则。如果SVG是通过<img src="icon.svg" alt="如何实现鼠标滑过改变SVG图标颜色_利用CSS fill属性控制" >或CSS background-image引入的，浏览器会把它当图片处理，fill完全不可控。
常见错误现象：写了.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></path>且原本颜色不同（比如红蓝两色logo），不能只靠currentColor统一变色。此时需给各路径加class，再分别定义hover状态。
- 原始SVG中给关键路径加class：
<path class="primary" d="..."></path>、<path class="secondary" d="..."></path> - CSS中分开控制：
.icon:hover .primary { fill: #007bff; }、.icon:hover .secondary { fill: #6c757d; } - 避免用
path:nth-child(1)这类结构选择器——SVG结构稍一调整就失效
IE11及旧版Edge对currentColor的支持有坑
IE11支持currentColor，但不支持在<svg></svg>根元素上设color来影响子元素fill（即svg { color: red; } + path { fill: currentColor; }在IE11里不生效）。解决方案是把color设在SVG的父容器上，并确保该容器是行内元素（如<span></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>上设<code>color再让SVG里的fill: currentColor生效——div默认不是行内上下文，currentColor会退回到初始值。
