SVG 线性渐变
SVG 渐变
渐变是从一种颜色平滑过渡到另一种颜色。此外，可以将几种颜色过渡应用于同一元素。
SVG 中有两种类型的渐变
- 线性渐变 - 使用
<linearGradient>定义 - 径向渐变 - 使用
<radialGradient>定义
渐变定义放在 <defs> 或 <svg> 元素中。<defs> 元素是“定义”的缩写，包含特殊元素（如渐变）的定义。
每个渐变必须有一个 id 属性来标识渐变。然后图形/图像指向要使用的渐变。
SVG 线性渐变 - <linearGradient>
<linearGradient> 元素用于定义线性渐变（从一种颜色到另一种颜色，从一个方向到另一个方向的线性过渡）。
<linearGradient> 元素通常嵌套在 <defs> 元素中。
线性渐变可以定义为水平、垂直或角度渐变
- 水平线性渐变（这是默认值）从左到右（其中 x1 和 x2 不同，y1 和 y2 相等）
- 垂直线性渐变从上到下（其中 x1 和 x2 相等，y1 和 y2 不同）
- 当 x1 和 x2 不同且 y1 和 y2 不同时，会创建角度线性渐变
水平线性渐变
一个椭圆，带有从黄色到红色的水平线性渐变
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
自己动手试一试 »
代码解释
<linearGradient>元素的id属性定义了渐变的唯一名称<linearGradient>元素的x1、x2、y1、y2属性定义了渐变的 x 和 y 起始点和结束点- 渐变的颜色由两个或多个
<stop>元素定义 <stop>中的stop-color属性定义了渐变停止点的颜色<stop>中的offset属性定义了渐变停止点的放置位置<ellipse>元素的fill属性将该元素指向“grad1”渐变
水平线性渐变
一个椭圆，带有从黄色到绿色再到红色的水平线性渐变
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad2" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
自己动手试一试 »
垂直线性渐变
一个椭圆，带有从黄色到红色的垂直线性渐变
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>
自己动手试一试 »
带文本的水平线性渐变
一个椭圆，带有从黄色到红色的水平线性渐变，并在椭圆内添加文本
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>
自己动手试一试 »
代码解释
<text>元素用于添加文本
角度线性渐变
一个椭圆，带有从黄色到红色的角度线性渐变
这是 SVG 代码
示例
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad5" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>
自己动手试一试 »
SVG <linearGradient> 属性
| Attribute | 描述 |
|---|---|
| id | 必需。定义 <linearGradient> 元素的唯一 ID |
| x1 | 渐变向量起始点的 x 位置。默认值为 0% |
| x2 | 渐变向量结束点的 x 位置。默认值为 100% |
| y1 | 渐变向量起始点的 y 位置。默认值为 0% |
| y2 | 渐变向量结束点的 y 位置。默认值为 0% |
| spreadMethod（扩散方法） | 定义渐变的扩散方法。可能的值：“pad”、“reflect”、“repeat”。默认值为“pad” |
| href | 定义对另一个 <linearGradient> 元素的引用，该元素将用作模板 |
| gradientUnits（渐变单位） | 定义 x1、x2、y1、y2 的坐标系。可能的值：“userSpaceOnUse”和“objectBoundingBox”。默认值为“objectBoundingBox” |
| gradientTransform（渐变变换） | 定义渐变坐标系的附加变换 |
