图标没变色是因为SVG未内联或存在高优先级内联fill属性；必须内联SVG并清除所有path等元素的fill属性，才能使CSS的fill生效。
fill 属性直接设置颜色时为什么图标没变色？
SVG 图标在 HTML 中内联（<svg></svg> 标签直接写在页面里）时，fill 才能生效；如果用 <img src="icon.svg" alt="如何通过CSS控制SVG图标颜色_利用fill属性与currentColor" > 或 CSS background-image 引入，fill 完全被忽略——因为外部 SVG 文件是独立文档上下文，无法被宿主页面的 CSS 选中或覆盖样式。
常见错误现象：fill: red 写了但图标还是黑色，大概率是用了 <img alt="如何通过CSS控制SVG图标颜色_利用fill属性与currentColor" > 方式加载。
- ✅ 正确做法：把 SVG 内联进 HTML，或用
<use></use>引用内联的<symbol></symbol> - ✅ 若必须用外部文件，改用
object或iframe（但有跨域和交互限制） - ⚠️ 注意：内联 SVG 中若已有
fill="black"等行内属性，它会优先于 CSS 的fill，需移除或用!important覆盖（不推荐）
currentColor 是什么，为什么它能让图标自动跟随文字颜色？
currentColor 是一个 CSS 关键字，等价于当前元素的 color 计算值。当它用在 SVG 的 fill 上，图标颜色就和包裹它的文本颜色实时同步。
使用场景：按钮里的图标、导航菜单项、表单标签旁的提示图标——所有需要“图标颜色随文字统一”的地方。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐写法：
svg { fill: currentColor; }，然后控制父容器或自身color - ✅ 支持继承：如果
span设了color: #007bff，里面<svg></svg>的fill: currentColor就自动变成蓝色 - ⚠️ 注意：
currentColor只作用于支持该关键字的属性（如fill、stroke），不适用于background-color等
如何让 SVG 图标在 hover 或 disabled 状态下正确变色？
关键不是给 SVG 单独写 :hover，而是把状态伪类加在**父容器**上，再通过后代选择器控制 SVG 的 fill。
.btn {
color: #333;
}
.btn:hover {
color: #007bff;
}
.btn:disabled {
color: #999;
}
.btn svg {
fill: currentColor;
}
这样，鼠标悬停或禁用时，父元素 color 变化，currentColor 自动响应，SVG 颜色跟着变。
- ✅ 不要写
svg:hover { fill: ... }—— 这只会响应鼠标在图标区域上，且无法触发禁用态 - ✅ 如果 SVG 有多个
<path></path>，确保它们都没设死行内fill，否则会覆盖 CSS - ⚠️ 在 dark mode 下，若
color没随主题更新，currentColor也不会变——得配合@media (prefers-color-scheme: dark)调整color
IE11 对 fill 和 currentColor 的兼容性要注意什么？
IE11 支持 fill，但对 currentColor 在 SVG 中的支持不完整：它只在部分 SVG 元素（如 <path></path>）上生效，且若 SVG 有 fill 行内属性，IE11 可能完全忽略 CSS 的 fill: currentColor。
- ✅ 兜底方案：用 CSS 自定义属性 + JS 检测，或为 IE11 单独提供 class 切换（如
.icon--primary） - ✅ 更稳妥的写法：去掉所有行内
fill，用svg path { fill: currentColor; }显式指定子元素 - ⚠️ 不要依赖
inherit替代currentColor—— SVG 中fill不继承color，inherit无效
fill="#000" 属性，不手动删掉，CSS 的 fill 就永远被压制。 
