渐变,是一种颜色向另一种颜色的平滑过渡。此外,几种颜色的过渡可以应用于同一个元素。SVG中有两种主要的渐变类型:线性渐变和径向渐变。

线性渐变应用 linearGradient 元素来定义,它必须嵌套在 defs 标签中,可以实现水平渐变、垂直渐变或角度渐变。

linearGradient 是一个双标签,基本语法是:尖角号 linearGradient,尖角号 /linearGradient。

它有两组坐标属性:x1, y1, x2, y2 (直接读出来),用于定义线性渐变的开始位置和结束位置。

当 y1 和 y2 相等,而 x1 和 x2 不等时,就会产生水平渐变。

当 x1 和 x2 相等,而 y1 和 y2 不等时,就会产生垂直渐变。

当 x1 和 x2 不等,y1 和 y2 也不等时,就会产生角度渐变。

SVG线性渐变和径向渐变_基本语法

线性渐变的颜色范围可以由两种或多种颜色组成。每种颜色都用一个 stop 标签来指定,它是一个双标签,基本语法为尖角号 stop,尖角号 /stop。一般需要定义两个属性:

offset 属性,用于定义渐变颜色的开始和结束位置,属性值是一个描述相对位置的百分比。 (10%)

stop-color 属性,用于定义渐变的颜色,取值为任何一个合法的颜色值。

我们来做个例子。

打开编辑器,新建一个 linear-radial.html 文件,补全基础代码,在 body 里添加一个 svg 标签,定义属性 width 等于 400,height 等于 150。

在 svg 里添加 ellipse 标签,给它定义属性 cx 等于 200,cy 等于 70,rx 等于 85,ry 等于 55。保存文件。

在浏览器中预览,一个背景默认为黑色的椭圆形就绘制好了。

SVG线性渐变和径向渐变_线性渐变_02

接下来给它填充一个线性渐变的颜色。

回到编辑器,在 svg 里的第一行添加一个 defs 标签,在标签内添加一个 linearGradient 标签,定义属性 x1 等于 0%,y1 等于 0%,x2 等于 100%,y2 等于 0%。我们看:y1 和 y2 相等,x1 和 x2 不相等,说明这是一个水平的线性渐变。

在 linearGradient 里添加 stop 标签,定义属性 offset 等于 0%,表示渐变从椭圆的最左侧开始。定义属性 stop-color 等于 rgb(255,255,0),表示渐变的颜色从黄色开始。

复制这个 stop 标签,修改属性 offset 为 100%,表示渐变到椭圆的最右侧。修改属性 stop-color 为 rgb(255,0,0),表示渐变的颜色到红色结束。保存。

回到浏览器,刷新。诶?怎么没有效果。

回到代码看一下。原来,我们只绘制了椭圆形和定义了渐变的效果,但没有将效果应用的图形上。

在 linearGradient 标签上定义 id 属性,值为 grad1,然后在 ellipse 标签上定义 fill 属性,值为 url 小括号 井号 grad1 "url(#grad1)"。这里的 grad1 就是我们在 linearGradient 标签上定义的 id 属性值。再次保存。

回到浏览器,刷新。一个背景从黄色到红色水平渐变的椭圆,就绘制好了。

SVG线性渐变和径向渐变_SVG_03

思考一下,如果将水平线性渐变调整为垂直线性渐变,该如何实现呢?

回到编辑器,只需要将 x2 修改为 0%,y2 修改为100%。我们看:x1 和 x2 相等,y1 和 y2 不相等,说明这是一个垂直的线性渐变。保存。

回到浏览器,刷新,一个背景从黄色到红色垂直渐变的椭圆就绘制好了。

SVG线性渐变和径向渐变_线性渐变_04

这里,我们也可以给椭圆添加文本。

回到编辑器,在 ellipse 标签下添加 text 标签,添加文本SVG,定义属性 fill 等于 #ffffff,font-size 等于 45,x 等于 150,y 等于 86。保存。

回到浏览器,刷新,文本就添加好了。

SVG线性渐变和径向渐变_线性渐变_05

接下来,我们学习径向渐变。

径向渐变应用 radialGradient 元素来定义,它也必须嵌套在 defs 标签中。

radialGradient 是一个双标签,基本语法是:尖角号 radialGradient,尖角号 /radialGradient。

它有几个重要的属性:

id 属性,定义了渐变的唯一名称。

cx、cy 和 r 属性,定义了最外面的圆,fx 和 fy 属性, 定义了最里面的圆。

径向渐变的颜色范围可以由两种或多种颜色组成。和线性渐变一样,每种颜色都用一个 stop 标签来指定,也需要定义 offset 和 stop-color 属性。

回到编辑器,在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签,属性 width 等于 500,height 等于 150。

在 svg 里添加 ellipse 标签,给它定义属性 cx 等于 200,cy 等于 70,rx 等于 85,ry 等于 55。保存。

回到浏览器,刷新,一个黑色椭圆形绘制好了。

返回编辑器,在 svg 里的第一行添加一个 defs 标签,在标签内添加一个 radialGradient 标签,定义属性 cx 等于 50%,cy 等于 50%,r 等于 50%,fx 等于 50%,fy 等于 50%。

在 radialGradient 里添加 stop 标签,定义属性 offset 等于 0%,表示渐变位置从椭圆的圆心开始。定义属性 stop-color 等于 rgb(255,255,255),表示渐变的颜色从白色开始。

复制这个 stop 标签,修改属性 offset 为 100%,表示渐变位置到椭圆的边界。修改属性 stop-color 为 rgb(0,0,255),表示渐变的颜色到蓝色结束。

在 radialGradient 标签上定义 id 属性,值为 grad2,然后在 ellipse 标签上定义 fill 属性,值为: url 小括号 井号 grad2 "url(#grad2)"。保存。

回到浏览器,刷新,一个具有白色高光的蓝色椭圆就绘制好了。

SVG线性渐变和径向渐变_SVG_06

思考一下,我们可以改变高光的位置吗?其实有的小伙伴已经想到了。

返回编辑器,将 radialGradient 标签的 cx,cy,fx,fy 的值全部修改为 30%,保存。

回到浏览器,刷新,高光的位置发生了变化。




SVG线性渐变和径向渐变_基本语法_07