一篇文章带你了解SVG 渐变知识渐变是一种从一种颜色到另一

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型：（Linear ， Radial）。
一、SVG 线性渐变元素用于定义线性渐变。
标签必须嵌套在的内部。标签是definitions的缩写，可对诸如渐变之类的特殊元素进行定义。
线性渐变可以定义为水平，垂直或角渐变。
/*y1和y2相等，而x1和x2不同时，可创建水平渐变。当x1和x2相等，而y1和y2不同时，可创建垂直渐变。当x1和x2不同，且y1和y2不同时，可创建角形渐变。 */实例 1定义水平线性渐变从黄色到红色的椭圆形。
SVG代码
项目运行效果：
一篇文章带你了解SVG 渐变知识文章插图
代码解析：

标签的id属性可为渐变定义一个唯一的名称。
标签的X1 ， X2 ， Y1 ， Y2属性定义渐变开始和结束位置。
渐变的颜色范围可由两种或多种颜色组成，每种颜色通过一个标签来规定。 offset属性用来定义渐变的开始和结束位置。
填充属性把 ellipse 元素链接到此渐变。

实例 2定义一个垂直线性渐变从黄色到红色的椭圆形。
SVG代码：
运行效果：

文章插图
实例 3【一篇文章带你了解SVG 渐变知识】定义一个椭圆形，水平线性渐变从黄色到红色并添加一个椭圆内文本。
SVG代码：
SVG运行效果：

文章插图
代码解析：
元素是用来添加一个文本。
二、SVG 放射性渐变元素用于定义放射性渐变。
标签必须嵌套在的内部。标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
实例 1定义一个放射性渐变从白色到蓝色椭圆。
SVG代码：
运行效果：
一篇文章带你了解SVG 渐变知识

文章插图
代码解析：

标签的 id 属性可为渐变定义一个唯一的名称。
CX ， CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆。
渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个标签指定。 offset属性用来定义渐变色开始和结束。
填充属性把ellipse元素链接到此渐变。

实例 2定义放射性渐变从白色到蓝色的另一个椭圆。
SVG代码：
运行效果：
一篇文章带你了解SVG 渐变知识

文章插图
三、总结本文基于HTML基础，介绍了图像SVG元素中的渐变效果，通过案例的分析，再实际项目中需要注意的点，对代码进行解析。开发项目中遇到的难题，都提供了一些有效的解决办法。
欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
代码很简单，希望能够帮助读者更好的去学习SVG 。
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：