SVG 渐变 – 线性

SVG 渐变 – 线性


SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。

SVG渐变主要有两种类型:

Linear
Radial


SVG 线性渐变 –

元素用于定义线性渐变。

标签必须嵌套在的内部。标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平,垂直或角渐变:

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


实例 1

定义水平线性渐变从黄色到红色的椭圆形:

下面是SVG代码:

实例

对于Opera用户:

对于Opera用户:

对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。

代码解析:

元素是用来添加一个文本

相关推荐

vue项目里面引用svg文件并给svg里面的元素赋值

CSS中引用svg图片支持动态切换颜色的实现代码

Canvas 文本填充线性渐变的使用详解

CSS3实现线性渐变用法示例代码详解