currentcolor是css关键字，值恒为元素color计算值；用于内联svg的fill/stroke时，可使图标随父级文字颜色（如悬停）自动变色，无需重复写样式，前提是清除硬编码颜色且父容器有明确color。
currentColor 是什么，为什么它能简化 SVG 悬停变色
currentColor 是一个 CSS 关键字，它始终等于元素的 color 计算值。对 SVG 来说，只要把 fill 或 stroke 设为 currentColor，图标就会自动继承父级文本颜色——这意味着你不用给每个图标单独写悬停规则，改一个 color 就全联动了。
常见错误是直接在 <svg></svg> 标签里硬编码 fill="#333"，或者用内联 style="fill: #333"，这样 :hover 时就得重复覆盖 fill 值，维护成本高、易遗漏。
如何让内联 SVG 正确响应 currentColor
关键在于：SVG 元素必须**不带硬编码的 fill/stroke**，且父容器需有明确的 color 值（哪怕只是 color: inherit）。
- 把 SVG 写成内联（即直接嵌入 HTML），不要用
<img src="icon.svg">—— 外部 SVG 文件无法读取宿主页面的 CSS 变量或currentColor - 删掉所有
fill、stroke属性（包括fill="black"这类 XML 属性），只保留结构 - 确保 SVG 的顶层
<svg></svg>元素或其某个祖先设置了color（比如按钮、链接、<span></span>） - 在 CSS 中对父元素设置
fill: currentColor（注意：这是对 SVG 子元素如<path></path>、<circle></circle>设置，不是对<svg></svg>）
示例：
<a href="#" style="color: #007bff;"> <svg width="16" height="16"><path d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"></path></svg></a>
CSS：
a svg path {
fill: currentColor;
}
a:hover {
color: #dc3545;
}
遇到 fill 不变色？检查这三处
最常卡在这几个地方：
-
<path></path>上残留了fill="none"或fill="#000"—— 浏览器会优先使用这个，忽略 CSS 的currentColor - 父元素没有设置
color（比如直接给<svg></svg>加color: red是无效的，<svg></svg>默认不继承color；得设在<a></a>或<button></button>上） - 用了
use引用符号（<use href="#icon"></use>），而源<symbol></symbol>里写了fill—— 这个 fill 会“冻结”样式，必须删掉源定义里的 fill，再统一用 CSS 控制
兼容性与边界场景提醒
currentColor 在所有现代浏览器中都支持（IE9+），但要注意：
- SVG 中的
filter（比如 drop-shadow）不会受currentColor影响，阴影颜色得另配 - 如果图标含多色（比如红蓝两部分），
currentColor只能提供单色；此时可考虑用 CSS 自定义属性（--icon-primary）配合var(--icon-primary)，但那就不是currentColor范畴了 - 某些 UI 库（如 Bootstrap）的按钮默认没设
color，只设了background-color和border-color，这时候得显式加color: inherit才能让currentColor有值可取
真正省事的前提，是 SVG 结构干净、父色可控、且你接受单色变化——这点容易被忽略，结果调半天发现图标的某条线还是黑的，其实是那条 <path></path> 漏写了 fill: currentColor。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
