13.3 SVG线性渐变（Linear Gradient）

SVG 渐变

和CSS3一样，SVG也支持渐变，渐变就是从一个颜色到另外一个颜色的平滑过渡，SVG支持单个元素使用多个渐变。渐变方式有两种：线性和径向。

SVG 线性渐变 - linearGradient

<linearGradient> 元素用来定义一个线性渐变。

<linearGradient> 元素必须被包含在一个 <defs> 标签中。如前面所述，<defs> 标签用来包含特殊元素（如滤镜、渐变等）。

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

• 当y1和y2相等，x1和x2不同时，创建水平渐变
• 当x1和x2相等，y1和y2不同时，创建垂直渐变
• 当y1和y2不同并且x1和x2也不同时，创建角度渐变（Angular gradients）

实例代码1 - 水平渐变

代码解释

• <linearGradient> 标签的id属性定义渐变的唯一标识名称
• <linearGradient> 标签的x1, x2, y1,y2属性定义渐变的起始位置
• 渐变的颜色范围可以由2个或多个颜色组成。每一种颜色都通过一个<stop>标签来指定。 offset属性用来定义渐变颜色开始和结束的位置。
• fill 属性把椭圆（ellipse）元素链接到该渐变。

修改x1, x2, y1, y2的值，你就可以分别实现不同角度（水平和垂直是特殊的角度，分别为0°和90°）的渐变。