svg学习记录（六）

在SVG中，并非只能填充图形颜色和添加描边，你也可以像CSS一样，给绘制的图形应用添加渐变色。分为线性渐变、径向渐变，具体如何应用渐变色我们进行看下去，在SVG中我们不能使用linear-gradient函数，这是无效代码！！

线性渐变

线性渐变是沿着直线改变颜色，我们看一个线性渐变的例子：

<svg width="300" height="500">
    <defs>
        <linearGradient id="test">
            <stop offset="5%" stop-color="#12c2e9" />
            <stop offset="85%" stop-color="#c471ed" />
        </linearGradient>
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="200" height="100"></rect>
</svg>

我们在画布中创建一个defs元素（稍后会讲到），在内部创建一个linearGradient标签（该标签用于定义线性渐变，应用于图形元素的填充、描边）。内部放了两个stop标签，这两个标签通过指定的位置offset属性和stop-color属性来说明在渐变的特定位置上渲染指定的颜色。

这里要注意的是offset值是从0开始的，范围为0%—100%（或者是0—1），如果出现位置重合，将采用后面设置的值。

stop标签一共有三个属性，上面我们已经展示了stop标签的两个属性，还有一个stop-opacity属性，用于设置某个位置的透明度。

<stop