currentColor不能响应var(--color)变化，因其仅读取已计算的color值而不监听变量变更；需通过父容器设置color: var(--color)并由内联SVG子元素用currentColor继承实现联动。
为什么currentColor不能响应var(--color)变化
currentColor不是变量，而是 CSS 关键字，它只读取当前元素已计算出的 color 值——这个值可以来自直接声明、继承，或由 color: var(--text-color) 计算得来，但它本身不监听变量变更。常见错误是写：fill: currentColor; color: var(--fill-color);，以为能联动；实际只要 --fill-color 未在作用域内定义或类型非法（比如不是颜色值），color 就会退为浏览器默认色，currentColor 跟着变黑，而非报错或跳过。
-
color: var(--fill-color, #007bff)是安全写法：提供明确降级色，避免 fallback 到不可控的黑色 - 变量必须定义在 SVG 容器或其祖先上，
:root声明的变量不会自动穿透到 SVG 内部子元素（除非该子元素也在同一样式作用域下） - Vue / React 等框架的 scoped style 会截断 color 继承链，需用
:deep(.icon) { color: var(--icon-color); }显式透出
如何让currentColor与var()真正协同工作
核心思路是把变量“注入”到 color 层，再由 currentColor 向下透传。这要求两层配合：父容器控制 color，SVG 元素自身用 currentColor 作为 fill 或 stroke 值。
- SVG 必须内联（
<svg></svg>直接写在 HTML 中），<img src="icon.svg" alt="如何利用CSS变量优化SVG图标的颜色填充_通过currentColor变量" >完全隔离，currentColor失效 -
<svg></svg>根标签建议显式写fill="currentColor"（比只写在<path></path>上更稳妥，会自动向下透传） - 所有子图形（
<path></path>、<circle></circle>等）不能带内联fill或stroke，否则覆盖currentColor - 多色图标需拆分为多个独立
<path class="head"></path>、<path class="body"></path>，再分别绑定fill: var(--color-head)，不能依赖currentColor模拟多色
fill: var(--color) 生效的前提条件
直接用 CSS 变量控制 fill 更灵活，但限制更硬：它只对内联 SVG 的子图形生效，且完全绕过 currentColor 链路。
- 变量必须定义在 SVG 父容器上（如
<div class="icon" style="--fill-color: #28a745;">），不能只靠 <code>:root声明 - CSS 规则必须精确匹配到图形元素，例如
.icon svg path { fill: var(--fill-color); }，写成.icon svg { fill: ... }无效（<svg></svg>不响应fill） - 如果原始 SVG 里有
fill="#000"，CSS 的fill: var()不会覆盖——必须删掉或改为fill="none" - 支持降级写法：
fill: var(--fill-color, currentColor)，变量未定义时回退到文字色，兼顾可访问性 -
<img src="icon.svg" alt="如何利用CSS变量优化SVG图标的颜色填充_通过currentColor变量" >：彻底沙箱化，外部 CSS、currentColor、var()全部失效，唯一解是改内联或预生成多版本 SVG -
<use href="#icon"></use>引用 sprite：默认不继承currentColor，必须额外包裹一层<svg><use></use></svg>并配 CSS.icon svg { fill: currentColor; } - Tailwind 的
fill-current本质就是fill: currentColor，但它不解决<img alt="如何利用CSS变量优化SVG图标的颜色填充_通过currentColor变量" >或 scoped style 截断问题，排查时优先看 computed 样式里的fill值是不是currentColor - 伪元素（
::before）里用background-image: url("data:image/svg+xml,...")时，var()无法注入——必须用构建时字符串插值（如 Less 的data-uri()+escape()）提前编译进 URL
构建时容易忽略的硬性隔离点
很多问题不是写法错，而是加载方式或 DOM 结构导致样式根本没机会作用。
立即学习“前端免费学习笔记（深入）”；
