fill: currentcolor在svg中不生效的根本原因是svg元素默认不继承color，需确保或其祖先显式设置可继承的color值，且继承链未被unset/inherit打断。
为什么fill: currentColor在SVG里不生效
常见现象是：给SVG容器（比如<svg></svg>标签或其父元素）设了color: red，内部<path fill="currentColor"></path>却还是黑色。根本原因不是语法错，而是SVG元素默认不继承color——只有明确设置了fill为currentColor，且该元素处于能读取到color值的继承链上才行。
关键点：
-
currentColor取的是计算后的color值，不是声明值；如果父级color被unset、inherit打断，或没显式设置，就回退到初始值black - 内联SVG中，
<svg></svg>本身不自动继承父文本颜色；需确保<svg></svg>或其某级祖先有可继承的color - 使用
<use></use>引用外部SVG时，currentColor作用域是引用点，不是原始定义处
怎样让fill: currentColor真正继承父级文字色
最可靠的做法是把color显式设在<svg></svg>标签上，而不是只靠祖先元素“透传”：
<div style="color: #007bff;"> <svg style="color: inherit;" width="24" height="24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"></path></svg> </div>
说明：
-
style="color: inherit"确保<svg></svg>拿到父级color，这是继承链的关键一环 - 若用CSS类控制，记得给
<svg></svg>加color: inherit或color: var(--text-color)，不能只写在<div>上<li>避免在<code><svg></svg>上直接写color: red——这会覆盖继承，失去动态性
和fill: inherit的区别在哪
fill: inherit试图继承父元素的fill值，但父元素通常没有fill（它是SVG专属属性），所以几乎总回退到black。而currentColor继承的是CSS标准的color属性，这才是设计初衷。
对比示例：
<div style="color: green;"> <svg><circle cx="10" cy="10" r="5" fill="currentColor"></circle><!-- ✅ 绿色 --><circle cx="20" cy="10" r="5" fill="inherit"></circle><!-- ❌ 黑色（父div无fill）--></svg> </div>
性能与兼容性：
-
currentColor是CSS2.1就支持的，所有现代浏览器包括IE9+都OK - 比JS手动同步颜色更轻量，也比CSS变量+
fill: var(--fill)少一层解析开销 - 注意：某些旧版Safari对嵌套
<svg></svg>里的currentColor继承有bug，建议扁平化结构
图标字体替代方案失效时，currentColor是更可控的选择
当项目弃用图标字体（如Font Awesome的<i class="fa"></i>），改用内联SVG时，开发者常误以为“只要写fill="currentColor"就能自动变色”，结果发现hover后颜色不变、暗色模式下不响应、或者和按钮文字色不同步。
真正要做的其实是：
- 统一用
color控制语义——比如按钮文字色即图标色，用color而非fill作为主色调源 - 对需要独立配色的SVG（如logo），不要用
currentColor，改用具体色值或CSS变量 - 暗色模式下，
currentColor会随color自动切换，但前提是:root或组件级color已通过@media (prefers-color-scheme: dark)正确重置
最容易被忽略的是：SVG元素默认display: inline，如果父容器设置了font-size: 0（常见于清除inline元素间隙），currentColor依然有效，但em-单位的尺寸会出问题——这时候得单独处理font-size或改用px。
