前面的话

  给SVG元素应用填充和描边,除了使用纯色外,还可以使用渐变。本文将详细介绍SVG渐变

线性渐变

  有两种类型的渐变:线性渐变和径向渐变。必须给渐变内容指定一个id属性,否则文档内的其他元素不能引用它。为了让渐变能被重复使用,渐变内容需要定义在<defs>标签内部,而不是定义在形状上面

  线性渐变沿着直线改变颜色,要插入一个线性渐变,需要在SVG文件的defs元素内部,创建一个<linearGradient> 节点

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop offset="0%" stop-color="#05a"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  结果如下所示,默认情况下实现的是水平方向的渐变

  <stop>元素一共有3个属性,包括offsetstop-colorstop-opacity

offset用来设置色标位置
stop-color用来设置色标颜色
stop-opacity用来设置色标的透明度

  下面是一个例子

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

【x1、x2、y1、y2】

  线性渐变包括x1、x2、y1、y2这四个属性,用来控制渐变的大小和方向。取值为0-100%,或者0-1的小数。默认地,x1=y1=y2=0、x2=1

  如果变成垂直方向的渐变,则需要设置为x1=x2=y1=0、y2=1

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" x1=0 x2=0 y1=0 y2=1>
<stop offset="0%" stop-color="#05a"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  如果将y2或x2设置为50%,则50%-100%这一部分区域填充为最后一个色标的纯色

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" x1=0 x2=50% y1=0 y2=50%>
<stop offset="0%" stop-color="#05a"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  当然了,可以有多个色标

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" x1=0 x2=1 y1=0 y2=1>
<stop offset="0%" stop-color="#05a"/>
<stop offset="20%" stop-color="#50a"/>
<stop offset="40%" stop-color="#5a0"/>
<stop offset="60%" stop-color="#a05"/>
<stop offset="80%" stop-color="#a50"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  渐变除了可以作为填充,也可以作为描边

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" x1=0 x2=1 y1=0 y2=1>
<stop offset="0%" stop-color="#05a"/>
<stop offset="20%" stop-color="#50a"/>
<stop offset="40%" stop-color="#5a0"/>
<stop offset="60%" stop-color="#a05"/>
<stop offset="80%" stop-color="#a50"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="transparent" stroke-width="10" stroke="url(#Gradient1)"/>
</svg>

【xlink:href】

  xlink:href属性用于在一个渐变中引用另一个渐变,被引用的渐变的属性是可继承的,也可以被重写

  下面的例子中,Gradient2引用了Gradient1的渐变,并重写了渐变的方向

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" x1=0 x2=1 y1=0 y2=1>
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
<linearGradient id="Gradient2" xlink:href="#Gradient1" x1=0 x2=0 y1=0 y2=1>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient2)"/>
</svg>

【gradientUnits】

  gradientUnits有两个的值,userSpaceOnUseobjectBoundingBox,这用于决定渐变是否随着引用它的元素进行缩放。也就是说它决定了x1y1x2y2的缩放

  userSpaceOnUsex1y1x2y2表示当前用户坐标系统的坐标。也就是说渐变中的值都是绝对值

  objectBoundingBoxx1y1x2y2表示应用渐变的元素创建的边界坐标系统。也就是说渐变随着应用的元素进行了缩放

  如果不设置,默认取值是objectBoundingBox

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  如果设置为userSpaceOnUse,则x1、x2、y1、y2需要设置为用户坐标系的坐标绝对值

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" gradientUnits="userSpaceOnUse" x1="10" x2="60" y1="0" y2="0">
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

【spreadMethod】

  spreadMethod可以接受三个值,padreflectrepeat,它定义了渐变如何开始和结束,当cxcy的值是在0%100%里面的时候

pad:(默认值)使用开始和结束位置的颜色结点来填充剩余的部分
reflect: 反射渐变图案,从开始->结束,再从结束->开始,然后开始->结束,往复直到空间都填满
repeat: 从start-to-end重复渐变图案,直到空间填满

  pad为默认值

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
<defs>
<linearGradient id="Gradient1" spreadMethod=pad x1=0.4 x2=0.6>
<stop offset="0%" stop-color="#05a"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  下面是reflect的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
<defs>
<linearGradient id="Gradient1" spreadMethod=reflect x1=0.4 x2=0.6>
<stop offset="0%" stop-color="#05a"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  下面是repeat的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >
<defs>
<linearGradient id="Gradient1" spreadMethod=repeat x1=0.4 x2=0.6>
<stop offset="0%" stop-color="#05a"/>
<stop offset="100%" stop-color="#0a5"/>
</linearGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

径向渐变

  径向渐变与线性渐变相似,只是它是从一个点开始发散绘制渐变。创建径向渐变需要在文档的defs中添加一个<radialGradient>元素

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1">
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#0a5"/>
</radialGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

【cx、cy、r、fx、fy】

  与线性渐变的x1、y1、x2、y2属性不同,径向渐变使用cx、cy、r、fx、fy这五个属性来设置渐变

r 设置圆的半径
cx、cy 定义渐变的中心点坐标
fx、fy 定义渐变的焦点坐标

  如果不设置,r默认0.5,即元素宽度或高度的一半;cx、cy默认为0.5;fx、fy默认为0.5

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1" r=0.5 cx=0.5 cy=0.5 fx=0.5 fy=0.5>
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#0a5"/>
</radialGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  巧妙地设置焦点坐标,可以实现聚光灯的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1" r=0.5 cx=0.5 cy=0.5 fx=0.8 fy=0.8>
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#0a5"/>
</radialGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

【xlink:href】

  xlink:href属性用于在一个渐变中引用另一个渐变,被引用的渐变的属性是可继承的,也可以被重写

  下面的例子中,Gradient2引用了Gradient1的渐变,并重写了渐变的方向

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1">
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#0a5"/>
</radialGradient>
<radialGradient id="Gradient2" xlink:href="#Gradient1" fx=0.6>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient2)"/>
</svg>

【gradientUnits】

  gradientUnits有两个的值,userSpaceOnUseobjectBoundingBox,这用于决定渐变是否随着引用它的元素进行缩放。也就是说它决定了cx、cy、fx、fy、r的缩放

  userSpaceOnUse: cx、cy、fx、fy、r表示当前用户坐标系统的坐标。也就是说渐变中的值都是绝对值

  objectBoundingBox: cx、cy、fx、fy、r表示应用渐变的元素创建的边界坐标系统。也就是说渐变随着应用的元素进行了缩放

  如果不设置,默认取值是objectBoundingBox

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#0a5"/>
</radialGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  如果设置为userSpaceOnUse,则cx、cy、fx、fy、r需要设置为用户坐标系的坐标绝对值

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1" gradientUnits="userSpaceOnUse" cx=35 cy=35 fx=35 fy=35 r=25>
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#0a5"/>
</radialGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

【spreadMethod】

  和线性渐变一样。它可以接受三个值,padreflectrepeat,它定义了渐变如何开始和结束,当cxcy的值是在0%100%里面的时候

pad:(默认值)使用开始和结束位置的颜色结点来填充剩余的部分
reflect: 反射渐变图案,从开始->结束,再从结束->开始,然后开始->结束,往复直到空间都填满
repeat: 从start-to-end重复渐变图案,直到空间填满

  pad为默认值

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1" r=0.2 spreadMethod=pad>
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#0a5"/>
</radialGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  下面是reflect的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1" r=0.2 spreadMethod=reflect>
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#0a5"/>
</radialGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

  下面是repeat的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient1" r=0.2 spreadMethod=repeat>
<stop offset="0%" stop-color="#05a"/>
<stop offset="50%" stop-color="#50a" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#0a5"/>
</radialGradient>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="50" height="50" fill="url(#Gradient1)"/>
</svg>

SVG渐变的更多相关文章

  1. 学习SVG系列(5):SVG渐变

    SVG渐变 渐变是一种从一种颜色到另一种颜色的平滑过渡,可以把多个颜色的过渡应用到同一个元素. 渐变有两种: Linear Redial 线性渐变-<linearGradient> lin ...

  2. 走进SVG

    什么是SVG?也许现在很多人都听说过SVG的人比较多,但不一定了解什么是SVG:SVG(Scalable Vector Graphics 一大串看不懂的英文)可伸缩矢量图形,它是用XML格式来定义用于 ...

  3. svg矢量图

    svg简介 Scalable Vector Graphics 可缩放矢量图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 svg知识点 svg如何绘图 svg和cnavas区别 svg ...

  4. SVG介绍

    SVG介绍 SVG是指可缩放矢量图(Scalable Vector Graphics).SVG使用XML格式来定义图形.SVG可以直接嵌入到HTML页面中. 位图和矢量图 位图(Bitmap)是由很多 ...

  5. svg基础知识体系建立

    一.简介:SVG 是使用 XML 来描述二维图形和绘图程序的语言. SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使 ...

  6. SVG和canvas画图,js求数组最大最小值

    windows命令行的内容怎么复制,右键选择标记,选中内容后再点击鼠标右键就复制了. 安装Node.js后再用npm install命令会出现如下warn:saveError ENOENT: no s ...

  7. HTML5 可缩放矢量图形(1)—SVG基础

    参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...

  8. 关于 CSS 反射倒影的研究思考

    原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...

  9. CSS遮罩——如何在CSS中使用遮罩

    Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...

随机推荐

  1. tensorflow官方文档中的sub 和mul中的函数已经在API中改名了

    在照着tensorflow 官方文档和极客学院中tensorflow中文文档学习tensorflow时,遇到下面的两个问题: 1)AttributeError: module 'tensorflow' ...

  2. Java操作Excel和Word

    这是一个URL它提供了Java项目所推荐的处理此项目所用的类库 http://www.oschina.net/project/tag/258/excel-tools?company=0&sor ...

  3. 使用maven搭建环境

    今天第一次用maven创建springmvc工程,下载配置都很成功,但用命令行创建项目时遇到一些问题: 1.命令行显示命令不为内部或外部命令: 解决方法:使用管理员模式打开命令行 2. 显示到如下图所 ...

  4. Azure 认知服务 (5) 计算机视觉API - 使用C#代码实现读取图片中的文字(OCR)功能

    <Windows Azure Platform 系列文章目录> 在笔者之前的文章:Azure 认知服务 (4) 计算机视觉API - 读取图片中的文字 (OCR) 介绍了使用用户界面,在海 ...

  5. redis持久化的几种方式

    1.前言 Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服务器端计算集合的并,交和补集 ...

  6. JPA常用注解

    JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中.        JPA由EJB 3.0软件专家 ...

  7. react - 解刨组件的多种写法

    一,原始的createClass写法 对于写react组件,很多人第一印象往往是createClass,这是因为createClass是react组件最原始的写法,基本每个学react的人都是接触这种 ...

  8. 版本管理工具Git(1)带你认识git

    简介 本篇将带领大家认识,git.github,让大家对git有基本的认识:下面将持续更新几篇文章来介绍git,见git导航: 下一篇中将讲解git的安装及使用: Git系列导航 版本管理工具Git( ...

  9. MATLAB中多行注释以及取消的快捷键

    多行注释:Ctrl+R 取消注释:Ctrl +T

  10. Fiddler设置代理(PC和Android)

    Fiddler设置 打开Fiddler,进入Tools--->Fiddler Options,勾选以下信息:   OK,就配置完成了.   PC端设置: 以火狐为例,打开选项--->高级 ...