SVG 渐变 - 线性 (线性 (Linear))

SVG 渐变

渐变是从一种颜色到另一种颜色的平滑过渡。此外，可以对同一元素应用多种颜色过渡。

SVG 中有两种主要类型的渐变：

• 线性 (线性 (Linear))
• 径向

SVG 线性渐变 -<linearGradient>

这<linearGradient>元素用于定义线性渐变。

这<linearGradient>元素必须嵌套在<defs>标签。<defs> 标签是definitions的缩写，包含特殊元素（例如渐变）的定义。

线性渐变可以定义为水平、垂直或角度渐变：

• 当 y1 和 y2 相等且 x1 和 x2 不同时，会产生水平渐变
• 当 x1 和 x2 相等且 y1 和 y2 不同时，会产生垂直渐变
• 当 x1 和 x2 不同且 y1 和 y2 不同时，会产生角度渐变

示例 1

定义一个具有从黄色到红色的水平线性渐变的椭圆：

以下是 SVG 代码：

代码解释：

• id 属性<linearGradient>标签为渐变定义一个唯一的名称
• x1, x2, y1,y2 属性<linearGradient>标签定义渐变的开始和结束位置
• 渐变的颜色范围可以由两种或多种颜色组成。每种颜色都用<stop>标签。offset 属性用于定义渐变颜色的开始和结束位置
• 填充属性将椭圆元素与渐变联系起来

示例 2

定义一个具有从黄色到红色的垂直线性渐变的椭圆：

以下是 SVG 代码：

示例 3

定义一个从黄色到红色的水平线性渐变的椭圆，并在椭圆内添加文本：

以下是 SVG 代码：

代码解释：

• 这<text>元素用于添加文本