fill 写在 标签上无效，因浏览器视其为布局元素而非可着色容器；必须精确作用于子元素（如 path、circle），且需清除内联 fill 属性才能使 currentColor 或 CSS 变量生效。
fill 和 stroke 是控制 SVG 图标颜色的核心 CSS 属性，但它们只对内联 SVG 的子元素（如 path、circle、rect）生效，不能直接写在 <svg></svg> 标签上靠继承起作用。
为什么 fill 写在 <svg></svg> 上没反应？
浏览器不把 <svg></svg> 当作可着色的“图形容器”，而是当作一个布局元素。你写 svg { fill: red; }，它不会自动透传给内部 path——除非你显式写 svg path { fill: red; } 或类似规则。
-
<svg></svg>标签本身支持fill属性（XML 属性），但仅当值是具体颜色（如fill="red"）时才生效；fill="currentColor"或fill="var(--c)"在属性里完全被忽略 -
fill和stroke的 CSS 规则必须**精确命中子元素**，比如.icon path、.icon circle、.icon [fill]（后者用属性选择器兜底） - 如果用了
<use></use>引用<symbol></symbol>，克隆出来的path不会自动继承父级 CSS 变量，得给<use></use>加 class 并单独写规则，例如.icon use { fill: currentColor; }
fill="currentColor" 怎么写才真正生效？
它不是“设了就完事”的语法糖，而是一条链式依赖：父元素必须有计算后的 color 值，且 SVG 子元素不能被内联 fill 覆盖。
- 删掉所有
path、circle上的fill和stroke属性（包括fill="none"——它会阻止currentColor透传） - 确保父容器（如
<button></button>、<a></a>、<div class="icon">）设置了 <code>color，哪怕只是color: inherit; - CSS 中写
.icon path, .icon circle { fill: currentColor; }，而不是只写.icon svg { fill: currentColor; } - 描边也要同步处理：
.icon path, .icon circle { stroke: currentColor; }，否则只有填充变色，描边还是黑的 - 变量定义必须落在可访问的作用域：推荐在
:root或图标父容器上，例如<div class="icon" style="--icon-color: #3b82f6;"><svg>...</svg></div> - CSS 规则必须明确指向子元素：
.icon path { fill: var(--icon-color, currentColor); }，回退值强烈建议带currentColor防止未定义时变黑 - 如果 SVG 是通过构建工具（如 SVGR）生成的，检查是否默认注入了
fill="hsl(0,0%,0%)"类似内联样式——它会覆盖你的 CSS 变量，得配svgo清理
fill: var(--icon-color) 的坑在哪？
变量只能出现在 CSS 规则中，不能塞进 HTML 的 fill 属性值里——fill="var(--icon-color)" 浏览器直接当无效字符串丢弃。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：SVG 源码里残留的 fill="#000" 或导出时自动加的 style="fill:#000"，比任何外部 CSS 优先级都高，不手动删掉，currentColor 和 var() 都白搭。
