less 语言原生不支持 svg-gradient 函数，该函数仅存在于第三方插件或工具链中；正确做法是使用 base64 编码的 svg data uri 内联渐变，或优先采用 css 原生渐变配合 ie 滤镜降级。
svg-gradient 函数根本不存在于 Less
Less 语言本身不提供 svg-gradient 函数。你看到的可能是社区插件（如 less-plugin-svg-gradient）的扩展，或是混淆了 PostCSS 插件、CSS-in-JS 库（如 styled-components 的 svg-gradient 工具函数）的行为。原生 Less 编译器（less.js 或 lessc）遇到 svg-gradient() 会直接报错：Unrecognised input 或 Function svg-gradient is undefined。
如果你在项目里“成功用了”，大概率是：
- 用了自定义 Less 插件，并已正确安装、注册到构建流程中
- 把 SVG 字符串写死在
background里，误以为是函数调用 - 实际是 Webpack/Vite 的 CSS loader 做了额外处理（比如
postcss-svg-gradient），和 Less 无关
想生成 SVG 渐变背景，Less 里最稳妥的做法是内联 data URI
SVG 渐变本质是 XML 字符串，可编码为 data:image/svg+xml;base64,... 或 URL 编码后内联。Less 支持字符串拼接和变量注入，适合封装基础渐变模式。
例如，一个水平线性渐变（#000 → #fff）的 SVG 内容是：
<svg xmlns="http://www.w3.org/2000/svg"><defs><lineargradient id="g" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="%23000"></stop><stop offset="100%" stop-color="%23fff"></stop></lineargradient></defs><rect width="100%" height="100%" fill="url(%23g)"></rect></svg>
把它 base64 编码后，就能安全用在 Less 变量中：
@bg-horiz: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxs/aW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cpIi8+PC9zdmc+";
然后在样式中使用：
background: url(@bg-horiz);
注意：URL 中的 # 必须编码为 %23，引号必须保留，整个字符串用双引号包裹（Less 要求字符串字面量加引号）。
用 Less 函数模拟 svg-gradient 的常见翻车点
有人尝试用 Less 的 ~""（转义字符串）配合字符串拼接模拟动态 SVG，比如：
.make-gradient(@from, @to) { background: ~"url('data:image/svg+xml;...fill=%7B@from%7D...')"; }
这看似灵活，但极易出问题：
- 颜色值中的
#、/、空格等必须手动urlencode，Less 没有内置编码函数，硬拼会生成无效 SVG - XML 结构稍有标签闭合错误或属性缺失，浏览器就静默失败（背景空白）
- Base64 编码后的 SVG 无法被 Less 变量插值，
~""里不能用@var，只能靠replace()+ 复杂正则，维护成本高 - 生成的 data URI 极长，影响 CSS 可读性和 gzip 效率（重复渐变无法复用）
真正高性能的替代方案：CSS 原生渐变 + fallback
99% 的“需要 SVG 渐变”的场景，其实只需要兼容老浏览器（IE9–11）或绕过某些 CSS 渐变渲染 bug。此时更合理的方式是：
- 优先用标准
linear-gradient()/radial-gradient()，现代浏览器支持完美 - 对 IE 加一层
filter: progid:DXImageTransform.Microsoft.gradient(...)（仅限 IE - 极少数必须 SVG 的情况（如复杂几何渐变、动画控制），改用
<svg></svg>元素或background-image: url(gradient.svg)外链——外链 SVG 可缓存、可压缩、可复用
Less 在这里只负责条件编译或变量管理，不该承担生成 SVG 的职责。把渐变逻辑交给 CSS 标准或资源构建工具，才是长期可维护的选择。
SVG 渐变不是性能瓶颈，手动生成时的编码错误、调试困难和后期修改成本，才是真麻烦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
