SVG 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型:
Linear
Radial
SVG 线性渐变 -
线性渐变可以定义为水平,垂直或角渐变:
当y1和y2相等,而x1和x2不同时,可创建水平渐变
当x1和x2相等,而y1和y2不同时,可创建垂直渐变
当x1和x2不同,且y1和y2不同时,可创建角形渐变
实例 1
定义水平线性渐变从黄色到红色的椭圆形:
下面是SVG代码:
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
代码解析:
标签的id属性可为渐变定义一个唯一的名称 标签的X1,X2,Y1,Y2属性定义渐变开始和结束位置 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个
标签来规定。offset属性用来定义渐变的开始和结束位置。 填充属性把 ellipse 元素链接到此渐变
实例 2
定义一个垂直线性渐变从黄色到红色的椭圆形:
下面是SVG代码:
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
实例 3
定义一个椭圆形,水平线性渐变从黄色到红色并添加一个椭圆内文本:
下面是SVG代码:
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
代码解析:
元素是用来添加一个文本