零基础教你学前端——50、SVG 线性渐变和径向渐变

渐变，是一种颜色向另一种颜色的平滑过渡。

此外，几种颜色的过渡可以应用于同一个元素。

SVG中有两种主要的渐变类型：线性渐变和径向渐变。

线性渐变应用 linearGradient 元素来定义，它必须嵌套在 defs 标签中，可以实现水平渐变、垂直渐变或角度渐变。linearGradient 是一个双标签，基本语法是：尖角号 linearGradient，尖角号 /linearGradient。它有两组坐标属性：x1, y1,  x2, y2  (直接读出来)，用于定义线性渐变的开始位置和结束位置。

当 y1 和 y2 相等，而 x1 和 x2 不等时，就会产生水平渐变。当 x1 和 x2 相等，而 y1 和 y2 不等时，就会产生垂直渐变。当 x1 和 x2 不等，y1 和 y2 也不等时，就会产生角度渐变。 

线性渐变的颜色范围可以由两种或多种颜色组成。

每种颜色都用一个 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 里的第一行添加一个 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 属性值。再次保存。回到浏览器，刷新。一个背景从黄色到红色水平渐变的椭圆，就绘制好了。

思考一下，如果将水平线性渐变调整为垂直线性渐变，该如何实现呢？ 回到编辑器，只需要将 x2 修改为 0%，y2 修改为100%。

我们看：x1 和 x2 相等，y1 和 y2 不相等，说明这是一个垂直的线性渐变。保存。回到浏览器，刷新，一个背景从黄色到红色垂直渐变的椭圆就绘制好了。

这里，我们也可以给椭圆添加文本。回到编辑器，在 ellipse 标签下添加 text 标签，添加文本SVG，定义属性 fill 等于 #ffffff，font-size 等于 45，x 等于 150，y 等于 86。

保存。回到浏览器，刷新，文本就添加好了。

接下来，我们学习径向渐变。径向渐变应用 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)"。保存。回到浏览器，刷新，一个具有白色高光的蓝色椭圆就绘制好了。

思考一下，我们可以改变高光的位置吗？其实有的小伙伴已经想到了。 返回编辑器，将 radialGradient 标签的 cx，cy，fx，fy 的值全部修改为 30%，保存。

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

文章配套视频链接：https://www.bilibili.com/vide...