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 (线 ...
最新文章
- jsp 插入mysql乱码_JSP MySQL插入数据时出现中文乱码问题的解决方法
- osg中运用Shader(osg初级篇2)
- Hi3516a移植SDL+FreeType+SDL_ttf
- DNS and BIND
- when is IBASE status changed from inital to created - not answered
- hibernate注解实体类(Emp.java)
- 【工作总结】银行的等级架构
- java多个类共享的数据_Java---多线程基础总结
- 批处理(bat)choice命令详解
- 笔记二:云上传与调用获取openid
- caffe教程 (2)
- 从Facebook上市看“社交网站效应”
- mstar v56几路hdmi_TCL MStar常用升级方法图文教程
- 用Mothur制作OTUtable
- 网络协议系列一 - 基本认识
- 安卓设备逐步升级Android 9,游戏产品该如何做适配?
- WinXP系统浏览器字体大小怎么调--win7w.com
- 类和对象的概述及二者之间的关系
- 第12期 《冬温夏清,玉树琼枝》11月刊
- [C++]TscanCode代码扫描工具
热门文章
- 如何在word中添加视频
- mac上迅雷下载不动的解决---上海003
- python3判断经纬度是否在陆地
- 台车式抛丸机,绝对的王将之风-锐达机械
- X widow 系统简介
- android读取运动数据权限_各种手机使用金管家平安Run健康行运动步数上传不计步读取时怎么解决?...
- 如何修改Win11上的默认程序?
- 老家菜seo关键词(大蜀山附近特色饭店)优化首页方法
- java中plus方法_Java中的LocalDate plus()方法
- 基于javaweb的茶叶售卖商城系统(java+ssm+jsp+easyui+mysql)