fill: currentColor 在外链 SVG 中无效，因浏览器将 img 加载的 SVG 视为独立文档，CSS 无法穿透样式边界，currentColor 解析为 black；仅内联 SVG 或 use 引入的符号支持继承父级 color。
fill: currentColor 能让 SVG 内部的 fill 继承父级文字颜色，但前提是 SVG 必须是内联（inline）写法或通过 <use> 引入的内联符号 —— 外链 SVG（如 <img src="icon.svg">）完全不支持该行为。
为什么 fill: currentColor 在外链 SVG 里无效
浏览器把 <img> 加载的 SVG 当作独立文档上下文，CSS 无法穿透边界继承父元素的 color。此时 currentColor 解析为初始值 black，且不可被外部样式覆盖。
- 只有内联 SVG 的
<path>、<circle>等图形元素才能响应父级color -
<object>或<iframe>加载的 SVG 同样隔离样式，也不行 - 如果 SVG 是雪碧图（sprite）并用
<use href="#icon-home">引入，只要符号定义在当前 HTML 文档中，就支持currentColor
内联 SVG 中正确使用 fill: currentColor 的写法
SVG 标签需直接写在 HTML 中，并确保子元素显式声明 fill="currentColor"（不能只靠 CSS 设置，因为 SVG 元素默认 fill 是 black，且内联属性优先级高于 CSS）。
<span style="color: #007bff;">
<svg width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M8 0c-4.42 0-8 3.58-8 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"/>
</svg>
编辑
</span>
- 必须写
fill="currentColor"在 SVG 子元素上，不是写在<svg>根标签上 - 如果 SVG 有多个
<path>，每个都需要单独加fill="currentColor" - 避免在 SVG 源文件里写死
fill="#333"，否则会覆盖currentColor
配合 CSS 变量实现更灵活的颜色控制
当需要让图标颜色独立于文字色（比如文字黑、图标蓝），可改用 CSS 自定义属性 + fill，绕过 currentColor 的耦合限制。
立即学习“前端免费学习笔记（深入）”；
<span class="icon-text">
<svg width="16" height="16" viewBox="0 0 16 16">
<path fill="var(--icon-color, currentColor)" d="..." />
</svg>
提交
</span>
<style>
.icon-text {
color: #333;
--icon-color: #007bff;
}
</style>
-
var(--icon-color, currentColor)表示：有变量则用变量值，否则回落到文字色 - 这样既保留“随文字变色”的默认行为，又支持按需覆盖
- 注意：IE 不支持 CSS 变量，若需兼容，仍得用 JS 动态设
style.fill或预设 class
真正容易被忽略的是 SVG 的加载方式 —— 很多人调试半天发现 fill: currentColor 不生效，最后发现只是用了 <img> 标签。内联或 <use> 是硬性前提，没得商量。
