16.SVG线性渐变(Linear Gradient)
SVG 渐变
和CSS3一样,SVG也支持渐变,渐变就是从一个颜色到另外一个颜色的平滑过渡,SVG支持单个元素使用多个渐变。渐变方式有两种:线性和径向。
SVG 线性渐变 - linearGradient
<linearGradient> 元素用来定义一个线性渐变。
<linearGradient> 元素必须被包含在一个 <defs> 标签中。如前面所述,<defs> 标签用来包含特殊元素(如滤镜、渐变等)。
线性渐变可以被定义为水平、垂直或角度渐变:
- 当y1和y2相等,x1和x2不同时,创建水平渐变
- 当x1和x2相等,y1和y2不同时,创建垂直渐变
- 当y1和y2不同并且x1和x2也不同时,创建角度渐变(Angular gradients)
实例代码1 - 水平渐变
1 2 3 4 5 6 7 8 9 |
|
代码解释
- <linearGradient> 标签的id属性定义渐变的唯一标识名称
- <linearGradient> 标签的x1, x2, y1,y2属性定义渐变的起始位置
- 渐变的颜色范围可以由2个或多个颜色组成。每一种颜色都通过一个<stop>标签来指定。 offset属性用来定义渐变颜色开始和结束的位置。
- fill 属性把椭圆(ellipse)元素链接到该渐变。
修改x1, x2, y1, y2的值,你就可以分别实现不同角度(水平和垂直是特殊的角度,分别为0°和90°)的渐变。
16.SVG线性渐变(Linear Gradient)相关推荐
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- css中的渐变的属性,CSS3 渐变属性(Gradients)-线性渐变(linearGradient)
通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. 丛本质上来说,既然 bac ...
- html垂直线性渐变,再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS如何设置自定义渐变色? 线性渐变篇
CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡. CSS定义了三种渐变类型: Linear Gradients (goes down/up/left/right/diagonally) 下 ...
- 微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients
线性渐变Linear Gradients 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 通用语法 ...
- 在html中如何添加线性渐变,CSS3如何实现线性渐变效果
CSS3实现线性渐变效果的方法:首先创建一个HTML示例文件:然后在body中创建一个div:最后通过"linear-gradient"属性实现线性渐变效果即可. 本文操作环境:w ...
- 【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )
文章目录 一.LinearGradient 线性渐变渲染 1.设置 2 个颜色的渐变 3.设置多个颜色的渐变 二.LinearGradient 线性渐变渲染重要参数分析 1.正常渲染 2.设置多个渐变 ...
- -webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示
webkit内核的safari. Chrome的Linear Gradients (线性渐变)的几点说明及演示: webkit内核的safari. Chrome的Linear Gradients (线 ...
最新文章
- Ubuntu16.04如何彻底删除Apache2
- 如何用 J-Link 来串口调试?
- html批量导入excel表格,html 导入excel表格数据格式-如何将网页中的表格快速复制到EXCEL中...
- 「本地搭建」worpress博客系统
- laravel框架查询条件
- 【数学】徐小湛第七高等数学新版
- http://coffeejp.com/bbs/forum.php?mod=viewthread,问题列表_华泰证券网络路演_新浪网
- vc6.0中的dsp,dsw,ncb,opt,clw,plg,aps等文件的简单说明
- 基于Arduino开发板的文本转语音(TTS)转换器
- 远程手机教学|简单实用,1键远程协助老人使用智能手机
- 文件上传页面出现400错误的问题
- 有所精,有所知,有所思
- 网络信息手机:web scrapper数据获取 、数据采集器、公众号信息收集
- ansible 报错:has no attribute default_ipv4
- 计算机考试老师怎么评卷,你写的字VS电脑阅卷呈现的字,两者相差悬殊,网友:机器尽力了...
- cics oracle xad_CICS安装问题及解决方式
- 微信公众平台获取网页授权(测试号)
- mysql seconds_behind_master_mysql Seconds_Behind_Master解释
- pyecharts官网使用说明书---保姆级手把手教你画图版
- RP Fiber Power 光纤激光器及光纤器件设计软件---简介
热门文章
- 关于端口的一些基本知识
- linux添加三权,锐捷推SAM运营商版方案 三权分立突破管理瓶颈
- Cannot connect to license server system. (-15,570:150 - Operation now in progress)
- Web API 的第四天
- 使用selenium进行淘宝购物测试
- python爬虫--一次爬取小说的尝试
- Failed to load resource: the server responded with a status of 406 (Not Acceptable)
- Java的类和包的总结
- VS 莫名其妙弹出 “遇到不适当参数” 问题的解决
- 黑客入门指南,小白如何成长为一名黑客之基本功