SVG渐变色详解

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

网上很多文章的内容都一样，连例子都一样，就是照搬W3School或菜鸟教程上的，导致我在菜鸟教程上自学的时候如果有内容不太清除时很难找到清晰的解释，于是我自己尝试、总结了SVG的用法和复杂命令以及参数的意义和原理。这篇文章将详细介绍SVG填充渐变色的内容。

前两篇文章传送门：SVG快速入门 

SVG中的路径path详解

在了解渐变色之前，先了解一下设置样式、特效会用到的一些标签，这部分内容很简单，不值得单独写一篇，所以就放在这里一起写了。

标签是用来分组的，被该标签包裹的元素都继承g中设置的样式，可以有效减少重复的代码量。在下面的例子中能看到该标签的用法

标签用来定义一小段具有特殊意义的代码片段，比如滤镜或渐变色，本身并没有什么复杂的含义，同样能在下面的例子中看到其用法

线条样式由stroke家族进行控制，除各种直观的线条外，文字或图片的轮廓也可以看作线条。

设置颜色线条颜色，注意不是stroke-color

设置线条粗细

前两个很简单，比如入门篇里的例子，就不放代码和截图了。

设置线条两端的样式，有三个值：butt，round，square，后面两个会在线的两端加上半圆和正方形，所以会比原线段要长。

设置虚线的样式。顾名思义，设置一个虚线数组，比如a1,b1,a2,b2，a表示每一截虚线的长度，b表示空的长度。以该数组为一个循环的单位，不断重复构成一整条虚线。可能描述的有点绕，看了下面的例子肯定就明白了：

分为线性渐变和放射性渐变两种，通过各自的标签进行定义，定义渐变的标签必须包在标签中，每个渐变需要有一个id，在图形中通过填充命令fill=“url(#渐变id)”就可使用该渐变。

下面以一个水平渐变的例子进行说明：

1.标签中的id属性用来给该渐变起一个id，便于在使用该渐变时能准确找到。

2.中有两组标签（用百分比）X1，Y1和X2，Y2，用来确定渐变的方向，渐变的方向是这两组位置的连线，所以渐变会有三种效果：

当y相等，而x不同时，渐变是水平方向的；当x相等，而y不同时，渐变是垂直方向的；当x和y都不同时，渐变是延某一角度的。

比如我把y2改成100%，则渐变是从左上到右下沿对角线进行的，效果如下：

3.offset属性用来定义渐变的开始和结束位置，比如把上面代码中第二个stop中的offset从100%改成50%，则渐变只发生在矩形的左半边，从右半边开始颜色不变。

4.渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。比如，之前是两个颜色，现在再加一个颜色：

文字本身也是通过标签绘制出来的，也有fill属性，所以也可以设置渐变色，比如下面的效果：

同样以一个例子进行说明：

用法和线性渐变相同，只有几个参数不一样，然而我稍微改了一下这几个参数就懵逼了，比如 改成cx="25%" cy="25%" r="10%" fx="50%" fy="50%"的时候，效果如下：

再将r改成25%时，效果如下：

百度一搜，所有网站的文章几乎全都是千篇一律的一句话“CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆”，显然都是照抄W3School或者菜鸟教程的。于是只能结合这句话自己琢磨，这些参数着实让我狠狠琢磨了一会儿

它的原理其实是这样的：

cx，cy和r确定一个圆（如上图的红色圆）它用来确定渐变填充的范围；

而fx和fy是渐变辐射的起点。

如果确定范围的圆没有包含(fx,fy)，则从fx和fy向红色圆做切线，切线与图形边界形成一个封闭区域，该区域中的绿色部分为填充渐变色的部分，其他部分全部填充终止颜色，如下图：

而如果确定范围的圆包含了(fx,fy)，则该圆与原图形重叠的部分就是填充渐变色的部分，剩下的部分全部填充终止颜色，原理图和效果图如下：

下面两个相对简单的例子验证了上面的原理，

1.(cx,cy)和(fx,fy)以及原图形中心重合，将r从50%变为10%，则渐变范围缩小，效果如下：

2.只将fy从50%改成0%，效果如下：可以看出来辐射的中心到了原图形的正上方

------------------------------------------------------------------------------------------------

最后还是要说，所有例子都是我自己练习时尝试的，图片也都是自己代码的截图或者用画图工具画的，未经许可禁止转载哦~

觉得有帮助的话就点个赞鼓励一下呗~