直接给svg背景图加fill不生效，因为background-image加载的是静态资源，浏览器不会解析svg内部的fill等属性，currentcolor、css变量及外部样式全部失效。
为什么直接给SVG背景图加fill不生效
因为background-image: url()加载的是静态资源，浏览器不会解析SVG内部的fill、stroke等属性。哪怕你写fill="currentColor"，在背景图里它只是字符串，不是可继承的CSS上下文。
常见错误现象：写了.icon { background-image: url("icon.svg"); color: red; }，但图标颜色完全不变；或者用fill="@{color}"却编译报错——Less不支持运行时解析SVG内容。
- SVG作为背景图时，
currentColor、CSS变量、外部样式全部失效 - IE对
%23（即#）编码不友好，需改用rgb()或无#的十六进制（如ff0000） - 纯Less无法调用
encodeURIComponent()，必须靠构建工具插件或开发期预处理
用Data URI + 变量插值生成动态背景图
核心是把SVG源码转成URL编码后的data:image/svg+xml,字符串，再用Less变量替换占位符。这不是“运行时换色”，而是“编译期注入真实值”。
安全写法示例：
@svg-check: '<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path fill="{fill}" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg>';
.icon-check(@color: #007bff) {
background-image: url(%('data:image/svg+xml,%s', replace(escape(@svg-check), '{fill}', '%23' + replace(@color, '#', ''))));
background-repeat: no-repeat;
}
-
escape()和replace()需构建环境支持（如less-plugin-url-encode），标准Less不内置 - 手动去掉
#再拼%23，是为了兼容IE；现代浏览器可直接用%23{@color} - 所有双引号、
、<code>>必须提前转义，否则Less编译失败
内联SVG时如何让currentColor真正生效
内联SVG是唯一能天然响应currentColor的方式，但前提是SVG源码不能自带硬编码的fill属性——它会因优先级更高而覆盖CSS设置。
最小可行结构：
<svg width="16" height="16" viewbox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 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>
-
fill="currentColor"写在<svg></svg>根元素上，比写在<path></path>上更稳妥，能透传给所有子图形 - 若用
<use></use>引用<symbol></symbol>，必须额外加CSS：.icon svg { fill: currentColor; }，且<symbol></symbol>里不能有固定fill -
::before伪元素中用content: url(icon.svg)时，currentColor无效——它不是内联DOM节点
多色图标必须拆成多个并分别控制
一个<path></path>只能有一个fill值。想实现红心+灰边的效果，不能指望单个fill属性分区域着色，必须把心形主体和描边拆成两个独立<path></path>，再用CSS类或变量分别控制。
例如：
<svg viewbox="0 0 24 24"><path class="heart-fill" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path><path class="heart-stroke" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
- Less中可用
.icon-heart(@fill: #e53935, @stroke: #999) { .heart-fill { fill: @fill; } .heart-stroke { fill: @stroke; } } - 不要试图用
mask-image模拟多色——它只适用于单色填充场景，且不支持描边、渐变等 - 如果图标来自Figma/Illustrator，导出前务必勾选“清除颜色属性”，否则会带一堆
fill="#000"进来
最常被忽略的点是：你以为在Less里写了变量就能动态换色，其实绝大多数场景下，你真正需要的是“编译期确定的字符串拼接”或“内联DOM节点的CSS继承”。把这两条路径混在一起，比如一边用background-image一边指望currentColor，问题就出在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
