currentColor 只继承文字颜色且不响应 CSS 自定义属性变化；内联 SVG 需手动设置 fill: var(--fill-color) 或通过 color + currentColor 组合实现主题适配，外链 SVG 完全隔离无法受控。
currentColor 能直接继承文字颜色，但不响应 CSS 自定义属性变化
currentColor 是一个关键字，它始终取当前元素的 color 计算值，不是变量，不能被 var(--fill-color) 覆盖或联动。常见误解是写 fill: currentColor; color: var(--fill-color); 以为能间接驱动 SVG 填充——不行，因为 color 属性本身不接受自定义属性作为合法值（除非你显式声明 color: var(--fill-color, black);，且该变量必须是颜色值）。
真正起作用的路径只有两条：要么让 SVG 元素自身参与 CSS 变量继承链，要么用 fill: var(--fill-color); 直接读取。
- SVG 内联时（
直接写在 HTML 中），其子元素（如fill: var(--fill-color); - SVG 外链时（
currentColor也失效 -
currentColor在内联 SVG 中有效，但只反映宿主元素的color，和自定义属性无绑定关系
用 fill: var(--fill-color) 需确保 SVG 是内联且可样式化
只有内联 SVG 才允许用外部 CSS 控制内部形状的 fill。关键前提是：SVG 元素不能自带 fill 属性（或设为 fill="none"），否则会覆盖 CSS。
示例 HTML：
<div class="icon" style="--fill-color: #007bff;"> <svg viewbox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.5 14.14 2 9.27l6.91-1.01L12 2z"></path></svg> </div>
CSS：
.icon svg path {
fill: var(--fill-color, currentColor);
}
- 如果
path原始有fill="#000"属性，CSS 的fill: var(...)不会生效，必须删掉或改为fill="none" -
var(--fill-color, currentColor)提供降级：变量未定义时回退到文字色，兼顾可访问性 - 变量需在祖先元素上定义（如上面的
style="--fill-color: ..."），不能只写在:root就指望所有 SVG 自动响应
通过 CSS 变量 + currentColor 实现主题色自动适配
想让 SVG 填充随文字色变，又保留用变量批量控制的能力？可以组合使用：color 继承给 SVG 容器，再用 currentColor 作为 fill 的值，同时用变量控制 color。
HTML：
<div class="theme-icon" style="--theme-color: #dc3545;"> <svg viewbox="0 0 24 24"><path d="..."></path></svg> </div>
CSS：
.theme-icon {
color: var(--theme-color);
}
.theme-icon svg path {
fill: currentColor;
}
- 此时
path的填充完全由.theme-icon的color决定，而color又由变量驱动 - 无需在每个
path上重复写var()，适合大量复用图标 - 注意：若 SVG 内部有
fill属性，仍会优先级更高，必须移除
IE 不支持 CSS 自定义属性，currentColor 在 IE9+ 支持但有渲染 bug
IE11 及以下不识别 var(--x)，currentColor 虽然支持，但在某些 SVG 渲染场景下（尤其是 引用符号）会丢失继承。实际项目中：
- 若需兼容 IE，放弃
var()方案，改用 BEM 类名切换（如.icon--primary、.icon--success）配合预设fill值 - 对现代浏览器，推荐用
currentColor+ 变量控制color的组合，简洁且语义清晰 - 不要试图用 JS 动态改
style.setProperty来“修复” IE，成本远高于放弃
最易忽略的一点：SVG 的 fill 默认值不是 currentColor，而是 black；哪怕你设置了 color，不显式写 fill: currentColor，它也不会自动响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
