currentColor能让SVG图标随父级color自动变色，但仅对内联SVG有效，且必须清除所有硬编码fill/stroke属性；最常见失效原因是SVG源码残留fill="#000"等内联样式，其优先级高于CSS，会静默覆盖currentColor。
直接结论：currentColor 能让 SVG 图标颜色随父级 color 自动变化，但只对内联 SVG 有效，且必须清除所有硬编码颜色属性。
为什么 fill="currentColor" 写了却没反应
最常见原因不是语法错，而是 SVG 源码里残留了硬编码颜色声明——比如导出工具自动加的 fill="#000"、stroke="red" 或 style="fill: black"。这些内联属性优先级高于 CSS，会静默覆盖 fill: currentColor。
- 逐个检查
<svg>根标签和所有子元素（<path>、<circle>、<rect>等），删掉所有fill、stroke、style属性 - 别在
<svg>上写color: inherit或fill: #333——它本就默认继承，显式写反而干扰层叠 - 用 DevTools 查看目标元素的
computed color值，确认它是你期望的颜色（不是transparent或rgba(0,0,0,0)）
内联 SVG 中 fill="currentColor" 写在哪一层更稳妥
写在 <svg> 根标签上（如 <svg fill="currentColor">）比写在每个 <path> 上更可靠：
- 现代浏览器会自动向下透传给所有子图形元素，只要子元素没自己声明
fill，就继承这个值 - 如果只靠 CSS 写
svg path { fill: currentColor }，得确保选择器能准确命中——比如用了<use href="#icon">，就得额外包裹一层：<svg><use href="#icon"></svg>，再配.icon svg { fill: currentColor } -
<use>渲染出的内容不在当前样式作用域内，纯 CSS 选不到，必须靠根标签透传或内联写死
哪些加载方式根本不能用 currentColor
<img src="icon.svg"> 和 background-image: url(icon.svg) 完全不支持 currentColor：
立即学习“前端免费学习笔记（深入）”；
- 它们把 SVG 当作独立文档或位图处理，样式上下文彻底隔离，
currentColor连解析机会都没有，一律回退为黑色 -
<object data="icon.svg">或<iframe>同样隔离上下文，也不行 - 唯一可靠方式只有两种：
<svg></svg>内联写死在 HTML 中；或用<use href="#id">引用页面内已定义的<symbol>，且该<symbol>内部也清空了所有硬编码颜色
描边、渐变、局部固定色怎么一起用
单色图标统一用 fill="currentColor" + stroke="currentColor" 即可；复杂场景需分层控制：
- 需要描边的线性图标：所有
<path>都设fill="none"，再统一加stroke="currentColor" - 局部固定色（如品牌标识中的红色元素）：单独写
fill="#e53935"，它不会被currentColor影响 - 渐变适配主题色：
<linearGradient>的stop-color="currentColor"也能生效，实现主题色渐变 - 避免在
<linearGradient>的stop-color或<filter>的flood-color中混用var(--x, currentColor)，部分旧版 Safari 支持不稳定
真正卡住人的地方往往不是 currentColor 本身，而是 DOM 结构和样式继承链的断裂——比如 SVG 被包裹进 Shadow DOM、跨 origin 的 <object>，或者父容器的 color 是 unset 或 transparent。这些细节不排查，光改 CSS 没用。
