渐变是从一种颜色到另一种颜色的平滑过渡。此外，可以将多种颜色的过渡应用于同一元素。SVG中有两种主要的渐变类型：线性渐变和径向渐变。线性渐变应该使用linearGradient元素定义，该元素必须嵌套在defs标签中，可以实现水平渐变、垂直渐变或角度渐变。linearGradient是一个双标签，基本语法是：cusplinearGradient,cusp/linearGradient。它有两组坐标属性：x1,y1,x2,y2（直接读），用来定义线性渐变的起始位置和结束位置。当y1和y2相等但x1和x2不相等时，会出现水平梯度。当x1和x2相等但y1和y2不相等时，会出现垂直梯度。当x1和x2不相等且y1和y2不相等时，会出现角度梯度。线性渐变的颜色范围可以由两种或多种颜色组成。每种颜色都指定一个停止标签，这是一个双标签，基本语法是停止和/停止。一般需要定义两个属性：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)，表示渐变的颜色从黄色开始。复制停止标记，并将属性偏移量修改为100%，这意味着渐变向椭圆的最右侧移动。修改属性stop-color为rgb(255,0,0)，表示渐变的颜色以红色结束。节省。返回浏览器并刷新。嗯？为什么没有效果。回过头来看代码。原来我们只是画了椭圆，定义了渐变的效果，并没有把效果应用到形状上。在linearGradient标签上定义id属性，值为grad1，然后在ellipse标签上定义fill属性，值为urlparenthesespoundsigngrad1"url(#grad1)"。这里的grad1是我们在linearGradient标签上定义的id属性值。再次保存。返回浏览器并刷新。绘制了一个水平渐变从黄色到红色的椭圆。想一想，如果将水平线性渐变调整为垂直线性渐变，如何实现呢？回到编辑器，只需将x2更改为0%，将y2更改为100%。看一下：x1和x2相等，y1和y2不相等，说明这是垂直线性渐变。节省。回到浏览器，刷新，绘制出一个椭圆，背景为黄色到红色的垂直渐变。在这里，我们还可以在椭圆中添加文本。回到编辑器，在ellipse标签下添加一个文本标签，添加一个文本SVG，并定义属性fill等于#ffffff，font-size等于45，x等于150，y等于86。保存。返回浏览器，刷新，文本将被添加。接下来，我们了解径向渐变。应使用radialGradient元素定义径向渐变，该元素还必须嵌套在defs标签中。radialGradient是一个双标签，基本语法是：angledradialGradient,angled/radialGradient。它有几个重要的属性：id属性定义了渐变的唯一名称。cx、cy和r属性定义最外圈，fx和fy属性定义最内圈。径向渐变的颜色范围可以由两种或多种颜色组成。与线性渐变一样，每种颜色都指定了一个停止标记，并且还需要定义偏移量和停止颜色属性。回到编辑器，在之前的svg末尾添加一个br标签。回车和换行。添加一个新的svg标签，属性width等于500，height等于150。将ellipse标签添加到svg中，并定义属性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)，表示渐变的颜色从白色开始。复制停止标签，修改属性偏移量为100%，表示渐变位置到椭圆边界。修改属性stop-color为rgb(0,0,255)，表示渐变的颜色以蓝色结束。在radialGradient标签上定义id属性，值为grad2，然后在ellipse标签上定义fill属性，值为：urlparenthesespoundsigngrad2"url(#grad2)"。节省。回到浏览器，刷新，一个白色高亮的蓝色椭圆就绘制出来了。想一想，我们可以改变高光的位置吗？其实有些朋友已经想到了。返回编辑器，将radialGradient标签的cx、cy、fx、fy的值改为30%，保存。回到浏览器，刷新，高亮的位置变了。文章配套视频链接：https://www.bilibili.com/video...
