只有内联SVG+清空硬编码颜色+父元素显式设color，currentColor才可靠生效；<img>、background-image、<use>引用外部SVG全部失效，因样式上下文隔离或内联属性覆盖。
直接结论：只有内联 SVG + 清空硬编码颜色 + 父元素显式设 color，currentColor 才能可靠生效；<img>、background-image、<use> 引用外部 SVG 全部失效。
为什么写了 fill="currentColor" 图标还是黑色？
最常见原因是 SVG 源码里残留了内联颜色声明，比如 fill="#000"、stroke="red" 或 style="fill: #333"。这些属性优先级高于 currentColor，浏览器会静默覆盖，不报错也不警告。
- 逐个检查
<svg>根标签和所有子元素（<path>、<circle>、<rect>），删掉所有fill、stroke、style属性 - 用 DevTools 查看目标容器的
computed color值——如果不是你预期的颜色（比如是transparent或默认rgb(0, 0, 0)），currentColor就不会变 - 别在父容器上写
color: inherit却不设任何颜色值，这等于没设color
fill="currentColor" 该写在 <svg> 还是 <path> 上？
写在 <svg> 根标签上更稳妥：<svg fill="currentColor"><path d="..."></path></svg>。现代浏览器会自动向下透传给所有子图形，只要子元素没自己声明 fill，就继承这个值。
- 写在每个
<path>上（<path fill="currentColor">）可行，但易漏、冗余，尤其含多个图形时 - 纯 CSS 方式（
svg path { fill: currentColor }）需要确保选择器能命中——<use href="#icon">渲染出的内容不在当前样式作用域内，CSS 选不到 - 如果必须用
<use>，得包裹一层<svg><use href="#icon"></svg>，再配.icon svg { fill: currentColor }
哪些加载方式根本不能用 currentColor？
<img src="icon.svg"> 和 background-image: url(icon.svg) 完全不支持 currentColor。它们把 SVG 当作独立文档或位图处理，样式上下文彻底隔离，currentColor 连解析机会都没有，一律回退为黑色。
立即学习“前端免费学习笔记（深入）”；
- 唯一可靠方式只有两种：
<svg></svg>内联写死在 HTML 中；或用<use href="#id">引用页面内已定义的<symbol>，且该<symbol>内部路径也清空了所有硬编码颜色 -
<object data="icon.svg">和<iframe>同样隔离上下文，也不行 - 字体图标（如 Font Awesome）可直接用
color: currentColor，前提是图标元素自身没写死color，且父级有color声明
真正容易被忽略的是：它不是“自动猜色”机制，而是严格依赖计算后的 color 值；哪怕只有一处 fill="#000" 残留，整个图标就卡死在黑色，且没有任何提示。
