图案和渐变
1.图案
使用图案填充图形，首先要定义一个水平或垂直方向的重复的图案对象，然后用它填充另一个对象或者作为笔画使用。这个图形对象被称为"tile"(瓷砖)。
图案对象使用pattern元素定义，pattern元素内部包裹了图案的path元素。定义好之后下一个需要解决的问题是如何排列图案，那就需要使用patternUnits属性.
-
patternUnits = objectBoundingBox
如果希望图案的大小基于要填充对象的大小计算，则需要设置patternUnits属性为objectBoundingBox(0到1之间的小数或百分比)，并需要指定图案左上角的x和y坐标。
-
patternUnits = userSpaceOnUse
按用户单位制定图案的width和height
patternContentUnits属性默认为userSpaceOnUse,当设置patternContentUnits属性为objectBoundingBox时就可以使用百分比来设置图案的大小。
2.渐变
SVG 渐变必须在 <defs> 标签中进行定义。渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
-
线性渐变：<linearGradient> 标签，必须嵌套在 <defs> 的内部
线性渐变是一系列颜色沿着一条直线过渡，在特定的位置指定想要的颜色，被称为渐变点。渐变点是渐变结构的一部分，颜色是表现的一部分。
stop元素的属性：
属性 说明 offset 必需，取值范围0%-100% stop-color 必需，对应offset位置点的颜色 stop-opacity 对应offset位置点的不透明度 linearGradient元素属性：
属性 说明 x1,y1 渐变的起点位置，使用百分比表示，默认的渐变方向是从左到右 x2,y2 渐变的终点位置，使用百分比表示 spreadMethod 如果设置的offset不能覆盖整个对象，该怎么填充。pad:起点或终点颜色会扩展到对象边缘。repeat:渐变重复起点到终点的过程。reflect:渐变按终点-起点-终点的排列重复。 - 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
- 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
- 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
<defs> <linearGradient id="linear"> <stop offset="0%" style="stop-color:#ffcc00;"></stop> <stop offset="100%" style="stop-color:#0099cc;"></stop> </linearGradient> </defs> <rect x="20" y="20" width="200" height="100" style="fill:url(#linear);stroke:black;"></rect> -
放射渐变：<radialGradient> 标签，必须嵌套在 <defs> 的内部
径向渐变的每个渐变点是一个圆形路径，从中心点向外扩散。设置方式与线性渐变大致相同。如果填充对象边界框不是正方形的，则过渡路径会变成椭圆来匹配边界框的长宽比。
radialGradient元素属性：
属性 说明 cx,cy,r 定义渐变的范围，测量半径的单位是对象的宽高均值，而不是对角线，默认都为50% fx,fy 0%点所处的圆路径的圆心，默认和cx,cy一样 spreadMethod pad,repeat,reflect三个值，用来解决绘制范围没有到达图形边缘的情况。
