CSS利用Less处理SVG图标的填色问题_通过变量控制SVG内联样式颜色

作者：袖梨 2026-07-25

SVG内联fill写死时Less变量无法穿透生效，因fill不继承color且Less不解析SVG内容；应通过data-uri+escape()将变量编译为真实值嵌入CSS背景，而非依赖currentColor或DOM内联。

SVG内联`fill`写死时，Less变量无法穿透生效

直接在SVG标签里写fill="#333"，哪怕外面套了.icon { color: @primary; }也没用——SVG的fill不继承color，更不会自动读取Less变量。这是最常卡住的地方。

解决思路不是“让变量透进去”，而是“把变量编译成真实值，塞进SVG里”。关键在预处理阶段完成替换，而不是运行时靠CSS继承。

不要在HTML中直接写<svg fill="#333">，改用占位符，比如fill="@{fill-color}"
用Less的.icon() 混合（mixin）封装常用图标，传入@fill-color参数生成对应样式规则
确保SVG是作为background-image: url("data:image/svg+xml,...")内联，而非DOM节点——这样才可控编译

用`data-uri` + `escape()`把SVG转成CSS背景

Less本身不解析SVG内容，但能拼字符串。把SVG内容URL编码后嵌入background-image，再用变量插值，是最稳妥的方案。

示例：定义一个图标背景混合：

立即学习“前端免费学习笔记（深入）”；

.icon-check(@color: #007bff) {  background-image: data-uri('image/svg+xml;charset=UTF-8',     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="@{color}" d="M12.5 4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h9.5z"/></svg>'  );  background-repeat: no-repeat;}

注意：escape()不是必须的，但若SVG含双引号或特殊字符，建议手动URL编码（如用encodeURIComponent处理后再粘贴），否则编译会报错。

为什么不用`currentColor`？它和Less变量不是一回事

currentColor确实能让SVG跟随color变化，但它只响应运行时CSS计算值，和Less编译期变量无关。你写.icon { color: @primary; }，编译后就是color: #007bff，这时currentColor才生效——但前提是SVG里真写了fill="currentColor"。