渐变 - 线性
编辑教程渐变 - 线性
SVG 线性渐变指的是沿着直线改变颜色,要插入一个线性渐变,只需要在 SVG 文件的 defs 元素内部,创建一个 <linearGradient> 节点即可。
SVG 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型:
- Linear
- Radial
SVG 线性渐变 - <linearGradient>
<linearGradient>元素用于定义线性渐变。
<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义。
线性渐变可以定义为水平,垂直或角渐变:
当y1和y2相等,而x1和x2不同时,可创建水平渐变 | |
---|---|
当x1和x2相等,而y1和y2不同时,可创建垂直渐变 | |
当x1和x2不同,且y1和y2不同时,可创建角形渐变 |
实例 1
定义水平线性渐变从黄色到红色的椭圆形:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
代码解析:
<linearGradient>标签的id属性可为渐变定义一个唯一的名称 | |
---|---|
<linearGradient>标签的X1,X2,Y1,Y2属性定义渐变开始和结束位置 | |
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。 | |
填充属性把 ellipse 元素链接到此渐变 |
实例 2
定义一个垂直线性渐变从黄色到红色的椭圆形:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
实例 3
定义一个椭圆形,水平线性渐变从黄色到红色并添加一个椭圆内文本:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
SVG</text>
</svg>
代码解析:
<text> 元素是用来添加一个文本
Mos固件,小电视必刷固件
ES6 教程
Vue.js 教程
JSON 教程
jQuery 教程
HTML 教程
HTML 5 教程
CSS 教程
CSS3 教程
JavaScript 教程
DHTML 教程
JSON在线格式化工具
JS在线运行
JSON解析格式化
jsfiddle中国国内版本
JS代码在线运行
PHP代码在线运行
Java代码在线运行
C语言代码在线运行
C++代码在线运行
Python代码在线运行
Go语言代码在线运行
C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。
大家可以一起参与进共编,让零散的知识点帮助更多的人。
X

选择支付方式:


立即支付

¥
9.99
无法付款,请点击这里
金额: 0 元
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟