svg-gradient

生成多站 svg 渐变。

Svg-gradient 函数生成多站 svg 渐变。它必须至少有三个参数。第一个参数指定渐变类型和方向，其余参数列出颜色及其位置。第一个和最后一个指定颜色的位置是可选的，其余颜色必须指定位置。

方向必须是 to bottom、to right、to bottom right、to top right、ellipse 或 ellipse at center 之一。方向可以指定为转义值 ~'to bottom' 和空格分隔的单词列表 to bottom。

方向后必须有两个或多个色标。它们可以在列表中提供，也可以在单独的参数中指定每个颜色停止点。

参数 - 列表中的颜色停止：

escaped value 或 list of identifiers：方向
list - 所有颜色及其在列表中的位置

参数 - 参数中的颜色停止：

escaped value 或 list of identifiers：方向
color [percentage] 对：第一种颜色及其相对位置（位置是可选的）
color percent 对：（可选）第二种颜色及其相对位置
...
color percent 对：（可选）第 n 种颜色及其相对位置
color [percentage] 对：最后一种颜色及其相对位置（位置是可选的）

返回： url 与 "URI-Encoded" svg 渐变。

示例 - 颜色在列表中停止：

div {
  @list: red, green 30%, blue;
  background-image: svg-gradient(to right, @list);
}

等效 - 参数中的颜色停止：

div {
  background-image: svg-gradient(to right, red, green 30%, blue);
}

两者都会导致：

div {
  background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0000%22%2F%3E%3Cstop%20offset%3D%2230%25%22%20stop-color%3D%22%23008000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');
}

注意：在 2.2.0 之前的版本中，结果是 base64 编码的。

生成的背景图片左侧为红色，其宽度的 30% 为绿色，最后为蓝色。 Base64 编码部分包含以下 svg-gradient：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ff0000"/>
        <stop offset="30%" stop-color="#008000"/>
        <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
    <rect x="0" y="0" width="1" height="1" fill="url(#gradient)" />
</svg>