在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