16.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 - 水平渐变

<svg height="150" width="400">

  <defs>

    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop>

      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>

    </linearGradient>

  </defs>

  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>

</svg>      

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