当前位置:网站首页>一篇文章带你了解SVG 渐变知识
一篇文章带你了解SVG 渐变知识
2020-11-06 20:42:00 【Python进阶者】
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。
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/ 想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/
版权声明
本文为[Python进阶者]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4521128/blog/4705765
边栏推荐
- Top 10 best big data analysis tools in 2020
- 如何将数据变成资产?吸引数据科学家
- 100元扫货阿里云是怎样的体验?
- Keyboard entry lottery random draw
- Python3 e-learning case 4: writing web proxy
- Vuejs development specification
- 快快使用ModelArts,零基础小白也能玩转AI!
- How to demote a domain controller in Windows Server 2012 and later
- Did you blog today?
- Installing the consult cluster
猜你喜欢
PHP应用对接Justswap专用开发包【JustSwap.PHP】
“颜值经济”的野望:华熙生物净利率六连降,收购案遭上交所问询
The difference between Es5 class and ES6 class
In order to save money, I learned PHP in one day!
Can't be asked again! Reentrantlock source code, drawing a look together!
Using Es5 to realize the class of ES6
Grouping operation aligned with specified datum
PHPSHE 短信插件说明
Filecoin最新动态 完成重大升级 已实现四大项目进展!
选择站群服务器的有哪些标准呢?
随机推荐
向北京集结!OpenI/O 2020启智开发者大会进入倒计时
Technical director, to just graduated programmers a word - do a good job in small things, can achieve great things
连肝三个通宵,JVM77道高频面试题详细分析,就这?
100元扫货阿里云是怎样的体验?
Using Es5 to realize the class of ES6
小程序入门到精通(二):了解小程序开发4个重要文件
Installing the consult cluster
从海外进军中国,Rancher要执容器云市场牛耳 | 爱分析调研
阿里云Q2营收破纪录背后,云的打开方式正在重塑
Let the front-end siege division develop independently from the back-end: Mock.js
Wiremock: a powerful tool for API testing
Analysis of ThreadLocal principle
PHP应用对接Justswap专用开发包【JustSwap.PHP】
Menu permission control configuration of hub plug-in for azure Devops extension
High availability cluster deployment of jumpserver: (6) deployment of SSH agent module Koko and implementation of system service management
ES6 essence:
快快使用ModelArts,零基礎小白也能玩轉AI!
连肝三个通宵,JVM77道高频面试题详细分析,就这?
深度揭祕垃圾回收底層,這次讓你徹底弄懂她
從小公司進入大廠,我都做對了哪些事?