SVG渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡，可以把多个颜色的过渡应用到同一个元素。
渐变有两种：
Linear
Redial
线性渐变-<linearGradient>
linearGradient元素用于定义线性渐变
linearGradient标签必须嵌套在defs标签的内部。defs标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可以定义为水平、垂直或角渐变：
1、当y1和y2相等，而x1和x2不同时，可创建水平渐变
2、当x1和x2相等，而y1和y2不同时，可创建垂直渐变
3、当x1和x2不同，且y1和y2不同时，可创建角形渐变
实例1
定义垂直线性渐变从黄色到蓝色的椭圆形，垂直渐变：
SVG代码：
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 216, 0);stop-opacity:1;" />
<stop offset="100%" style="stop-color:rgb(0, 255, 255);stop-opacity:1;"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
</svg>
实例2
定义水平线性渐变从黄色到蓝色的椭圆形，水平渐变：
SVG代码：
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255, 216, 0);stop-opacity:1;" />
<stop offset="100%" style="stop-color:rgb(0, 255, 255);stop-opacity:1;"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
</svg>
实例3
定义角形渐变从黄色变蓝色
SVG代码：
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="50%" y2="50%">
<stop offset="0%" style="stop-color:rgb(255, 216, 0);stop-opacity:1;" />
<stop offset="100%" style="stop-color:rgb(0, 255, 255);stop-opacity:1;"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
</svg>
实例4
放射性渐变-<radialGradient>
定义一个放射性渐变从白色到红色椭圆：
SVG代码：
<svg height="400" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="rad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" >
<stop offset="0%" style="stop-color:rgb(255, 255, 255);stop-opacity:0;" />
<stop offset="100%" style="stop-color:rgb(255, 0, 0);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#rad1)"/>
</svg>
代码解析：
1、radialGradient标签的id属性可为渐变定义一个唯一的名称
2、CX、CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
3、渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
4、填充属性把ellipse元素链接到此渐变