currentColor能自动继承文字颜色，因为它始终等于元素的color计算值，SVG的fill、stroke等属性支持该关键字，且内联SVG可继承父级color样式。
currentColor 为什么能自动继承文字颜色
currentColor 不是变量，而是 CSS 关键字，它始终等于元素的 color 计算值。SVG 中的 fill、stroke 等属性支持该关键字，因此只要 SVG 元素自身或某个祖先设置了 color，图标就会“跟着变色”。
关键点在于：SVG 必须是内联（inline）或通过 <use></use> 引用内联符号（<symbol></symbol>），不能是 <img src="icon.svg" alt="如何通过CSS变量简化复杂的SVG图标着色_利用currentColor与自定义属性" >——后者完全隔离样式，currentColor 失效。
- 内联 SVG 的根元素（如
<svg></svg>）若未显式设置color，会从父级继承；可直接在按钮上写style="color: #007bff"，图标自动响应 - 避免给
<svg></svg>设置color: inherit—— 它本就默认继承，显式写反而可能干扰层叠 - 如果 SVG 内部路径写了
fill="black"等固定值，会覆盖currentColor；必须删掉或改为fill="currentColor"
用 CSS 自定义属性控制多色区域
单靠 currentColor 只能统一主色。当图标有描边+填充+高光等多色区域时，需用 --icon-fill、--icon-stroke 等自定义属性配合 var()。
注意：CSS 变量必须在 SVG 元素上声明（或其祖先），且要确保作用域正确——SVG 内部无法读取外部 :root 变量，除非变量定义在 SVG 父容器上。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<span class="icon" style="--icon-fill: #28a745; --icon-stroke: #1e7e34"><svg>...</svg></span> - SVG 内部对应写：
<path fill="var(--icon-fill)" stroke="var(--icon-stroke)"></path> - 不要在
<svg></svg>上直接写style="--icon-fill: ..."——部分浏览器对 SVG 元素的自定义属性支持不稳定，挂载到外层容器更可靠 - 变量缺失时需设 fallback：
var(--icon-fill, currentColor)，防止未定义导致渲染异常
IE11 兼容性下如何降级处理
IE11 完全不支持 CSS 自定义属性，var() 会解析失败，导致 fill 变成无效值（图形消失）。但 currentColor 在 IE9+ 都可用，这是唯一可依赖的兼容方案。
- 若必须支持 IE11，放弃多色变量，统一用
currentColor+ 单色设计（例如只填色、描边用透明或同色） - 可通过
@supports (--css: variables)区分现代浏览器，但 IE11 不识别该 at-rule，所以需配合 JS 检测或构建时条件编译 - 不建议用 PostCSS 插件「降级」变量——它无法还原逻辑（比如把
var(--icon-fill)替换成什么？无上下文）
动态切换主题时 SVG 不重绘的问题
修改 document.documentElement.style.setProperty('--primary-color', 'red') 后，已渲染的 SVG 若使用了该变量，**不会自动更新**——因为 SVG 属性是静态解析的，不监听变量变化。
- 解决方案：强制重绘，最轻量的是触发 SVG 的
transform微调，例如el.style.transform = 'scale(1.001)'; setTimeout(() => el.style.transform = '', 0) - 更稳妥的方式是重新设置
fill属性值：遍历所有相关<path></path>，执行el.setAttribute('fill', getComputedStyle(el).getPropertyValue('--icon-fill')) - 如果用 Web Components 封装图标，可在
attributeChangedCallback中响应变量变更，但需手动绑定监听逻辑
真正麻烦的不是怎么换色，而是得记住：CSS 变量改了，SVG 不知道——它只认快照，不认未来。
