SVG 线性渐变
SVG 渐变
渐变是从一种颜色到另一种颜色的平滑过渡。此外，可以将几种颜色过渡应用于同一个元素。
SVG 中有两种类型的渐变
- 线性渐变 - 使用
<linearGradient>定义 - 径向渐变 - 使用
<radialGradient>定义
渐变定义放置在 <defs> 或 <svg> 元素内。 <defs> 元素是 "definitions" 的缩写，包含特殊元素（如渐变）的定义。
每个渐变必须具有一个 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>
自己尝试一下 »
代码解释
id属性的<linearGradient>元素定义了渐变的唯一名称x1、x2、y1、y2属性的<linearGradient>元素定义了渐变的 x 和 y 起始点和结束点- 渐变的颜色用两个或多个
<stop>元素定义 stop-color属性在<stop>中定义了渐变停止的颜色offset属性在<stop>中定义了渐变停止的位置fill属性的<ellipse>元素将元素指向 "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> 属性
| 属性 | 描述 |
|---|---|
| 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 | 定义对渐变坐标系的额外变换 |
