SVG内联时fill不生效的典型原因是源码自带fill属性，覆盖CSS设置；解决方法是删除SVG中所有显式fill/stroke属性，改用currentColor让CSS接管颜色控制。
SVG内联时fill不生效的典型原因
直接在HTML里写<svg></svg>标签却改不了颜色，大概率是SVG源码里自带了fill属性（比如fill="#000"或fill="black"），它会覆盖CSS设置。浏览器渲染时，内联属性优先级高于外部样式，fill: currentColor自然被无视。
解决思路很直接：删掉SVG代码里所有显式的fill、stroke等颜色相关属性，只保留结构和viewBox。让CSS完全接管颜色控制。
为什么用currentColor而不是具体颜色值
currentColor不是魔法，它是CSS的一个关键字，代表当前元素的color计算值。对图标来说，它意味着“跟文字颜色保持一致”，方便统一主题色切换。
实际好处包括：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
color: #3498db，图标自动变蓝；换主题时只需改一处color - 配合伪类如
:hover或:focus，图标颜色可随状态联动 - 避免为每个图标单独写
fill规则，减少CSS冗余
SVG作为背景图时fill:currentColor无效怎么办
把SVG当background-image用时，fill: currentColor完全不起作用——因为背景图是独立资源，不参与当前DOM的颜色继承链。
可行方案只有两个：
- 改用内联SVG（推荐）：把SVG代码直接嵌入HTML，再加
style="fill: currentColor"或外部CSS规则 - 预生成多色SVG文件：用构建工具（如SVGR）把同一图标导出为不同
fill版本，按需引用
注意：CSS filter: hue-rotate()虽能变色，但会破坏灰阶和透明度，不建议用于精确配色场景。
React/Vue中动态修改SVG fill的注意事项
框架里用组件封装SVG时，容易忽略props透传问题。比如封装成<icon name="home" color="red"></icon>，但内部没把color转成fill属性，或者没清空原始SVG里的fill。
关键检查点：
- 确保组件渲染的SVG节点上没有硬编码的
fill（可通过浏览器开发者工具检查DOM） - 如果用
dangerouslySetInnerHTML或v-html插入SVG，需提前用正则清理掉原生fill属性 - Vue 3组合式API中，若用
defineProps接收color，应绑定到根<svg></svg>的:style="{ fill: color }"，而非仅靠currentColor
最稳妥的方式始终是：清除原始fill + 使用内联SVG + 用CSS控制，三者缺一不可。任何环节遗漏，都会让颜色控制失效。
