根本原因是SVG未处在有效的color继承链上，currentColor取当前元素自身计算出的color值而非父级透传；需确保svg父元素有可计算color且未被unset/inherit打断，同时清除所有内联fill/stroke属性。
内联SVG里fill="currentColor"为什么没变色
根本原因是SVG没处在有效的color继承链上——currentColor取的是**当前元素自身计算出的color值**，不是父级“透传”过来的。哪怕父级写了color: red，如果<svg></svg>自己没继承到（比如被color: unset打断，或父级是<button></button>这类UA样式干扰严重的元素），它就回退到默认黑。
- 检查开发者工具「Computed」面板里
<svg></svg>节点的color值：要是rgb(0, 0, 0)或inherit，说明没真正继承到 -
<button></button>、<input>等表单控件默认color由浏览器UA样式控制（Chrome是buttontext，Firefox可能是-internal-light-dark()），结果不可预测，必须显式覆盖 - 确保
<svg></svg>标签直接父元素有可计算的color，且中间没被color: initial或color: unset截断
SVG源码里哪些fill属性必须删掉
硬编码的fill会按CSS层叠优先级覆盖currentColor，哪怕只写在<svg></svg>标签上也不行。它不是“没生效”，而是“赢了”。
- 删掉所有
fill="xxx"：包括<svg fill="black"></svg>、<path fill="#333"></path>、<circle fill="red"></circle> - 删掉所有
stroke="xxx"（如果也要随色变化） - 保留
width、height、viewBox等非颜色属性 - React/Vue注入时注意：框架可能把
fill="currentColor"转义成fill="%23000"，得检查DOM实际渲染结果
fill="currentColor"和fill: currentColor哪个更可靠
两者都能用，但作用域和透传能力不同：fill="currentColor"是SVG属性，写在HTML标签里；fill: currentColor是CSS声明，需要选择器匹配到具体图形元素。
- 推荐优先用
<svg fill="currentColor"></svg>：它会向下透传给所有子<path></path>、<circle></circle>，除非子元素显式覆盖 - 如果图标部分区域要固定色（比如品牌红），再单独给那个
<path></path>加fill="#e53935"，它不会受currentColor影响 - 用CSS方式时，必须写全选择器：
svg path, svg circle { fill: currentColor; }，只写svg { fill: currentColor; }对子元素无效 -
stroke="currentColor"同理，描边也要单独设
background-color: currentColor在伪元素里为什么不显示
不是逻辑错，是兼容性问题：IE11和Safari 15.4之前不支持background-color中使用currentColor，整条声明会被静默忽略，不报错也不渲染。
立即学习“前端免费学习笔记（深入）”；
- 检查目标浏览器支持情况，必要时降级为
background-color: var(--theme-color, #2563eb) - 伪元素（如
::before）本身没有文本内容，color值常为空，所以currentColor回退为黑——需确保宿主元素（即声明::before的那个元素）显式设了color - 别在伪元素里写
color: inherit，这会让currentColor指向伪元素自己的color（通常没值），而不是父级 -
box-shadow: 0 0 4px currentColor比background-color兼容性更好，现代浏览器全支持
currentColor不参与CSS动画过渡。hover时改color，边框或图标颜色不会平滑渐变，只在动画帧结束时跳变。要做渐变效果，得用color-mix(in srgb, currentColor 50%, transparent)或JS监听重排事件。 
