SVG图案和渐变填充

在基本图形绘制中，我们只用了纯色为图形对象填充颜色和绘制轮廓。其实，出来纯色以外，我们还可以使用图案和渐变来填充图形或者绘制图形轮廓。

一、图案填充：

我们首先来看图案填充，要使用图案，首先要定义一个水平或垂直方向重复的图形对象，然后用它填充另一个对象或者作为画笔使用。这个图形对象称作tile（瓷砖），因为使用图案填充对象的行为很想在地面上铺瓷砖的过程。

以上代码显示，我们使用元素将创建图案的元素包裹了起来，然后确定一些事。同时，我们还可以发现，不仅仅对象可以用图案来填充，就连图案也是可以用图案进行填充的，都是通过fill:url(#xxx)来进行的。结果如下图：

这里介绍几个属性：

1、patternUnits属性（如何排列图案）：当它属性值为：objectBoundingBox时，把边界框尺寸的百分比作为坐标（默认行为）；当它的值为：userSpaceOnUse时，则采用填充对象的坐标系统，也就是绝对的。

2、patternContentUnits属性（用什么单位表示图案数据本身）：默认情况下为userSpaceOnUse。如果设置成objectBoundingBox，则路径本身的数据点会基于被填充的对象来确定。

3、viewBox：在pattern里设置viewBox的属性值，可以实现图案的缩放。

二、渐变色填充

接下来我们来看一下渐变色填充。渐变分为径向渐变（radialGradient）和线性渐变（linearGradient）。

线性渐变：一系列颜色沿着一条直线过渡；

径向渐变：每个渐变点表示一个圆形路径，从中心店向外扩散。

两种渐变的设置方式大致相同。我们以径向渐变为例：

效果图：

通过上述代码，我们先来分析线性渐变和径向渐变共有的：

1、元素：stop元素拥有两个必要属性：①offset：确定哪个点的颜色应该等于stop-color，值为0%~100%；②stop-color被指定在style中，但也可以指定它为独立属性。

2、属性：该属性拥有三个属性值：①pad：起始和结束渐变点会扩展到对象的边缘；②repeat：渐变会重复起点到终点的过程直到填充满整个对象；③reflect：渐变会按终点到起点、起点到终点的排列重复，直到填充满整个对象。

3、绘制多彩边框：设置好渐变色并标上id，在绘制图形的时候，将stroke属性设置为：stroke：url(#id)，注意调整stroke-width为大于1，否则太细看不清楚。

径向渐变：cx、cy、r定义渐变圆，默认圆心为焦点。如果要改变焦点，则需要设置fx、fy属性；

线性渐变：通过对x1、y1、x2、y2的设置，定义线性渐变的方向，代码如下：