内联svg是前提，fill/stroke仅对直接嵌入html的svg生效；或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></path>根本不在当前 DOM 中，CSS 选不到 -
<path></path>上有没有写死fill="#000"这类内联属性？它优先级高于任何外部 CSS，必须手动删掉或改成fill="none" - 父容器有没有设置
color值？如果用了fill: currentColor却没给外层元素设color，那它继承的就是默认黑色或浏览器初始值
用 currentColor 实现自动同步变色
这是最轻量、可维护性最强的批量方案，但必须满足三个条件：
- SVG 内联（直接贴进 HTML）
- 所有
<path></path>、<circle></circle>等图形元素上清除fill和stroke属性（或改写为fill="currentColor"） - 父级容器（比如
<button></button>、<span></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"></path></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"></use>引用的<symbol></symbol>必须定义在当前页面 DOM 中（比如藏在<svg style="display:none"></svg>里），否则currentColor不会穿透 - CSS 变量（
var(--color)）不能写在 SVG 的fill属性里：fill="var(--color)"是无效字符串，必须靠 CSS 规则驱动 - 描边图标（如轮廓箭头）只改
fill没用，得同时加stroke: currentColor和stroke-width
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
