一篇文章带你了解SVG 渐变知识（svg动画效果）
zhezhongyun 2025-07-09 00:21 40 浏览
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型：（Linear，Radial）。
一、SVG 线性渐变
<linearGradient>元素用于定义线性渐变。
<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，可对诸如渐变之类的特殊元素进行定义。
线性渐变可以定义为水平，垂直或角渐变。
/*y1和y2相等，而x1和x2不同时，可创建水平渐变。
当x1和x2相等，而y1和y2不同时，可创建垂直渐变。
当x1和x2不同，且y1和y2不同时，可创建角形渐变。*/
实例 1
定义水平线性渐变从黄色到红色的椭圆形。
SVG代码
<!DOCTYPE html>
<html>
<body style="background-color: aqua;">
<title>项目</title>
<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>
</body>
</html>
运行效果：
代码解析：
- <linearGradient>标签的id属性可为渐变定义一个唯一的名称。
- <linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置。
- 渐变的颜色范围可由两种或多种颜色组成，每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
- 填充属性把 ellipse 元素链接到此渐变。
实例 2
定义一个垂直线性渐变从黄色到红色的椭圆形。
SVG代码：
<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代码：
<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="#000" font-size="45" font-family="Verdana"
x="150" y="86"> SVG</text>
</svg>
运行效果：
代码解析：
<text> 元素是用来添加一个文本。
二、SVG 放射性渐变
<radialGradient>元素用于定义放射性渐变。
<radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
实例 1
定义一个放射性渐变从白色到蓝色椭圆。
SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
运行效果：
代码解析：
- <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称。
- CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆。
- 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束。
- 填充属性把ellipse元素链接到此渐变。
实例 2
定义放射性渐变从白色到蓝色的另一个椭圆。
SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialGradient id="grad1" cx="20%" cy="30%" r="30%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
运行效果：
三、总结
本文基于HTML基础，介绍了图像SVG元素中的渐变效果，通过案例的分析，再实际项目中需要注意的点，对代码进行解析。开发项目中遇到的难题，都提供了一些有效的解决办法。
欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
代码很简单，希望能够帮助读者更好的去学习SVG。
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/
相关推荐
- Opinion丨Struggle Against U.S. Mind colonization in the Global South
-
Editor'snote：Thismonth,XinhuaNewsAgency'sThinkTankreleasedareporttitled"Colonizationof...
- 爱可可AI论文推介(2020.11.4)_爱可可女装旗舰店
-
LG-机器学习CV-计算机视觉CL-计算与语言AS-音频与语音RO-机器人(*表示值得重点关注)1、[LG]*CombiningLabelPropagationan...
- 何新:罗马伪史考英文版序言_罗马史学
-
2019-10-2514:48:27何新：罗马伪史考序言（英文译本）HeXin:PreambleofResearchonPseudo-historyofRome1Afewyear...
- XPeng Stock Rises Over 4% after Q2 Revenue and EV Margin Set Records
-
TMTPOST--TheAmericandepositaryreceipts(ADRs)ofXPengInc.rosearound4.2%onTuesdayaftert...
- 英汉世界语部首(八)_英文部首字典
-
本节讲八个部首，分别是：弓gōng【ECWLrad】bow廾gǒng【ECWLrad】twen广guǎng【ECWLrad】vast己jǐ【ECWLrad】self已yǐ...
- 一课译词:划水_划水是什么地方的方言
-
[Photo/SIPA]懒惰是人类的天性，因此才总有人会在工作时“划水”。“划水【huáshuǐ】”，本意是指“用胳膊划的动作（makestrokeswithone’sarms）”，延伸为“...
- 首测!GPT-4o做Code Review可行吗?
-
编辑|言征出品|51CTO技术栈（微信号：blog51cto）近日，OpenAI一记重拳，推出了GPT-4o（“o”表示“omni”），将语音识别和对话方面的优势展示的淋漓尽致。几乎可以肯定，...
- C++|漫谈STL细节及内部原理_c++ stl详解
-
1988年，AlexanderStepanov开始进入惠普的PaloAlto实验室工作，在随后的4年中，他从事的是有关磁盘驱动器方面的工作。直到1992年，由于参加并主持了实验室主任BillWo...
- C++ inline关键字深度解析:不止于优化的头文件定义许可
-
在C++开发中，几乎每个程序员都用过inline关键字，但多数人只停留在“内联优化”的表层理解。事实上，inline的真正威力在于它打破了C++的单一定义规则（ODR）限制，成为头文件中安全定义函数的...
- 实用 | 10分钟教你搭建一个嵌入式web服务器
-
之前分享的文章中提到了几种可以在嵌入式中使用的web服务器。嵌入式web服务器就是把web服务器移植到嵌入式系统的服务器。它仍然是基于http文本协议进行通信的，具有标准的接口形式，对客户端...
- 中间语言格式_中间格式文本是什么
-
在通常情况下，编译器会将目标语言转换成某种中间语言格式，而不是直接将源代码转换成二进制机器指令，不少c语言编译器，都会将代码编译成汇编语言，然后再通过汇编语言编译器将汇编代码转换成目标机器可执行的二进...
- 一线开发大牛带你深度解析探讨模板解释器，解释器的生成
-
解释器生成解释器的机器代码片段都是在TemplateInterpreterGenerator::generate_all()中生成的，下面将分小节详细展示该函数的具体细节，以及解释器某个组件的机器代码...
- 干货，Web开发和前端开发逆天工具大全
-
微信ID：WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄（点击页底“阅读原文”前往下载）●●●逆天工具CDN资源库国内Bootstrap中文网开源项目免费CDN服务36...
- 移动端rem+vw适配_移动端web页面适配方案
-
rem：rem是相对单位，设置根元素html的font-size，比如给html设置字体大小为100px，1rem=100px;rem缺点:1.和根元素font-size值强耦合，系统字...
- 从零搭建 React 开发 H5 模板_react html5
-
项目创建创建项目文件夹mkdir react-democd react-demonpm init -y依赖安装yarn add rea...
- 一周热门
- 最近发表
-
- Opinion丨Struggle Against U.S. Mind colonization in the Global South
- 爱可可AI论文推介(2020.11.4)_爱可可女装旗舰店
- 何新:罗马伪史考英文版序言_罗马史学
- XPeng Stock Rises Over 4% after Q2 Revenue and EV Margin Set Records
- 英汉世界语部首(八)_英文部首字典
- 一课译词:划水_划水是什么地方的方言
- 首测!GPT-4o做Code Review可行吗?
- C++|漫谈STL细节及内部原理_c++ stl详解
- C++ inline关键字深度解析:不止于优化的头文件定义许可
- 实用 | 10分钟教你搭建一个嵌入式web服务器
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- opacity 属性 (32)
- transition 属性 (33)