概要总结
1、线性渐变概念
2、实现线性渐变效果
3、径向渐变概念
4、实现径向渐变效果
一、线性渐变概念
SVG中主要有两种渐变类型：线性渐变和径向渐变。
1、线性渐变<linearGradient>
线性渐变应用linearGradient元素来定义，它必须嵌套在defs标签中，可以实现水平渐变、垂直渐变或角度渐变。它有两组坐标属性：x1, y1, x2, y2，用于定义线性渐变的开始位置和结束位置。
(1)水平渐变：当y1和y2相等而x1和x2不等
(2)垂直渐变：当x1和x2相等而y1和y2不等
(3)角度渐变：当x1和x2不等y1和y2也不等
2、<stop>标签
线性渐变的颜色范围可以由两种或多种颜色组成，每种颜色都用一个stop标签来指定。它是一个单标签，一般需要定义两个属性。
(1)offset：用于定义渐变颜色的开始和结束位置，属性值是一个描述相对位置的百分比。
(2)stop-color：用于定义渐变的颜色，取值为任何一个合法的颜色值。
二、实现线性渐变效果
1、绘制一个椭圆形
<svg width="400" height="150" style="background: #eee">
<ellipse cx="200" cy="70" rx="85" ry="55"/>
</svg>
2、添加线性渐变颜色
通过、、三个标签组合，实现线性渐变效果。
<svg width="400" height="150" style="background: #eee">
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="rgb(255, 255, 0)"/>
<stop offset="100%" stop-color="rgb(255, 0, 0)"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"/>
</svg>
3、效果与图形关联
线性渐变定义好之后，需要应用到图形上。首先在linearGradient标签上添加一个id属性为grad1，然后在ellipse标签上添加fill属性值为url(#grad1)。
<svg width="400" height="150" style="background: #eee">
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="grad1">
<stop offset="0%" stop-color="rgb(255, 255, 0)"/>
<stop offset="100%" stop-color="rgb(255, 0, 0)"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
</svg>
注意：图形上的ellipse的fill属性值需要对应标签的id属性值，这样它们才能关联起来。
4、垂直线性渐变
从水平线性渐变调整为垂直线性渐变，只需要把x1和x2设为0%，y1设为0%，y2设为100%即可。
<svg width="400" height="150" style="background: #eee">
<defs>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="grad2">
<stop offset="0%" stop-color="rgb(255, 255, 0)"/>
<stop offset="100%" stop-color="rgb(255, 0, 0)"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)"/>
</svg>
5、代码演示
三、径向渐变概念
径向渐变应用radialGradient定义，它也必须嵌套在defs标签中。它有以下几个属性：
id属性定义了渐变的惟一名称，cx、cy、r属性定义最外面的圆，fx和fy属性定义了最里面的圆。关于cx、cy、r、fx、fy属性在下面的案例分析。
径向渐变的颜色范围可以由两种或多种颜色组成，和线性渐变一样，每种颜色都用一个stop标签来指定。也需要定义offset和stop-color属性。
四、实现径向渐变效果
1、绘制一个椭圆形
<svg width="400" height="150" style="background: #eee">
<ellipse cx="200" cy="70" rx="85" ry="55"/>
</svg>
2、添加径向渐变颜色
通过<defs>、<radialGradient>、<stop>个标签组合，实现径向渐变效果。
<svg width="400" height="150" style="background: #eee">
<defs>
<radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%" id="grad3">
<stop offset="0%" stop-color="rgb(255, 255, 255)"/>
<stop offset="100%" stop-color="rgb(0, 0, 255)"/>
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)"/>
</svg>
3、属性分析
(1)cx：径向渐变结束的x轴位置，值是关联图形的宽度百分比，一般会设置50%，也就是在图形的中间。
例如：cx为20%
(2)cy：径向渐变结束的y轴位置，值是关联图形的高度百分比，一般会设置50%，也就是在图形的中间。
例如：cy为20%
(3)fx：颜色渐变圆焦点x轴的位置，值是关联图形的宽度半分比，一般会设置50%，也就是在图形的中间。
例如：fx为20%
(4)fy：颜色渐变圆焦点y轴的位置，值是关联图形的高度半分比，一般会设置50%，也就是在图形的中间。
例如：fy为20%
(5)r：颜色渐变圆的半径，值是关联图形的半分比，一般会设置50%，也就是图形的一半。
1.r为50%
2.r为20%
3.r为100%
4、代码演示
总结：其实径向渐变可以理解为，一个人拿着手电筒照在墙上，电筒的位置就是高光的位置，它对应的就是fx和fy。而手电筒离墙的距离，就是属性r，距离越近，r越小，覆盖面就越小。如果手电筒是正对着墙而照射，那就相当于cx和cy都是50%，正好照在墙的中央。如果手电筒是斜着照在墙上，那么这个倾斜度就是cx和cy了，cx是横向的倾斜度，cy是纵向的倾斜度。
五、代码链接
