当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

运行结果.png

代码解释：
1.< linearGradient > 标签的 id 属性可为渐变定义一个唯一的名称。
2.fill:url(#orange-red) 属性把 ellipse 元素链接到此渐变。
3.< linearGradient > 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置。
4.渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 < stop > 标签来规定。offset 属性用来定义渐变的开始和结束位置。

（四）SVG 放射渐变
< radialGradient > 用来定义放射性渐变。

运行结果.png

代码解释：
　　< radialGradient > 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey-blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 < stop > 标签来规定。offset 属性用来定义渐变的开始和结束位置。

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！