为什么直接给SVG背景图设置 fill 不生效
因为CSS背景图（background-image: url(...)）加载的是静态资源，浏览器不会解析其中的SVG样式属性，fill、stroke 等内联样式或CSS规则在作为背景图时完全被忽略。即使你用 fill="currentColor"，也只在SVG直接内联到HTML时才响应父级文字颜色——背景图里它只是字符串。
用Data URI + URL编码实现动态填色
核心思路是把SVG内容转成URL编码后的Data URI，在CSS中拼接变量值。Less支持字符串插值，可以将颜色变量注入SVG源码再编码。
- 必须对SVG原始字符串做两次处理：先替换占位符（如
{fill}），再进行URL编码（空格→%20，#→%23，双引号→%22等） - 推荐用JavaScript辅助生成（开发期一次性），或用构建工具插件（如
less-plugin-url-encode）；纯Less无法运行encodeURIComponent - 一个安全写法示例：
@icon-check: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23{@color}" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/%3E%3C/svg%3E'; - 注意：IE不支持Data URI中的
%23（即#），需改用rgb()或十六进制不含#的形式（如fill="ff0000"）
用svg-fill函数封装常见图标
Less本身不提供SVG编码函数，但可通过预定义带占位符的模板+变量组合复用逻辑：
- 定义基础模板：
@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>'; - 封装为参数化混合（mixin）：
.icon-check(@color: #007bff) {<br> background-image: url(%('data:image/svg+xml,%s', encodeURIComponent(replace(@svg-check, '{fill}', @color))));<br>}（注：encodeURIComponent和replace是假设构建环境支持的扩展函数；标准Less不内置） - 更现实的做法：用构建脚本（如Node.js +
svgo+less-vars-to-js）在编译前生成已填色的Data URI变量
兼容性与维护成本的真实权衡
Data URI填色看着灵活，但实际项目中容易失控：
- 每个颜色变体都生成独立Data URI，CSS体积增长快，缓存效率低
- SVG结构稍一改动（比如加
class或改viewBox），所有相关Data URI都要重生成 - 真正需要动态换色的场景（如主题切换），不如直接内联SVG并用
fill: currentColor+ CSS自定义属性控制 - 如果必须用背景图，优先考虑字体图标（如IconFont）或雪碧图（Sprite），填色需求少时更省事
最常被忽略的一点：Data URI里的SVG不能引用外部资源（如<use href="..."></use>），也不支持CSS变量作用域，所有样式必须硬编码或替换。
