内联SVG是前提，fill/stroke仅对直接嵌入HTML的SVG生效；<img>或background-image引入的SVG无法用CSS控制颜色，因其DOM不暴露；需清除内联fill/stroke属性并配合currentColor与父级color实现自动变色。
fill 和 stroke 能改，但只对内联 SVG 有效；用 <img> 或 background-image 引入的 SVG，CSS 完全无法控制颜色——这不是写法问题，是浏览器根本没把路径当 DOM 节点暴露给你。
为什么 fill: red 写了却没反应
常见错误现象：.icon path { fill: red; } 生效不了，检查三件事：
- SVG 是不是内联在 HTML 里？
<img src="x.svg">或background: url(x.svg)—— 这两种方式下，<path>根本不在当前 DOM 中，CSS 选不到 -
<path>上有没有写死fill="#000"这类内联属性？它优先级高于任何外部 CSS，必须手动删掉或改成fill="none" - 父容器有没有设置
color值？如果用了fill: currentColor却没给外层元素设color，那它继承的就是默认黑色或浏览器初始值
用 currentColor 实现自动同步变色
这是最轻量、可维护性最强的批量方案，但必须满足三个条件：
- SVG 内联（直接贴进 HTML）
- 所有
<path>、<circle>等图形元素上清除fill和stroke属性（或改写为fill="currentColor"） - 父级容器（比如
<button>、<span>）显式设置了color，例如style="color: #3b82f6;"
示例结构：
立即学习“前端免费学习笔记（深入）”；
<button style="color: #ef4444;">
<svg viewBox="0 0 16 16" width="1em" height="1em">
<path d="M8 0c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/>
</svg>
</button>CSS 只需一行：
.button svg path { fill: currentColor; }hover、disabled、深色模式切换时，只要改父容器 color，图标就跟着变——不需要额外 JS 或多套 SVG 文件。
多色图标或必须用 <img> 的场景怎么办
内联 SVG 不现实时，别硬套 currentColor，换思路：
- 用
filter做近似调色：适合单色图标（纯黑/纯白），例如filter: invert(1) sepia(1) saturate(5) hue-rotate(120deg);。但颜色不准、IE 不支持、无法精确指定十六进制色 - 用
mask+background-color：把 SVG 当蒙版，用背景色“透”出来，兼容性好且可控，写法是mask-image: url(icon.svg); background-color: currentColor; - 构建时自动清理：如果用 SVGR 或 vite-plugin-svgr，配置
svgoConfig删除内联fill，避免手动处理每个文件
容易被忽略的关键细节
实际项目里，真正卡住人的往往不是原理，而是这些隐性约束：
-
<use href="#xxx">引用的<symbol>必须定义在当前页面 DOM 中（比如藏在<svg style="display:none">里），否则currentColor不会穿透 - CSS 变量（
var(--color)）不能写在 SVG 的fill属性里：fill="var(--color)"是无效字符串，必须靠 CSS 规则驱动 - 描边图标（如轮廓箭头）只改
fill没用，得同时加stroke: currentColor和stroke-width
