1、SVG概述
可伸缩矢量图形(Scalable Vector Graphics,SVG)使用XML格式在Web上定义基于矢量的图形。矢量图形是根据几何特性来绘制的图形,矢量(Vector)可以是一个点或一条线。矢量图以几何图形居多,图形可以无限放大,不变色、不模糊,常用于图案、标志、文字等方面的设计。
1)SVG的特性
与JPEG和GIF等格式的图像相比,SVG图像更主要具有如下优势。
SVG图像可以使用任何文本编辑器创建和编辑,而JPEG和GIF等格式的图像必须使用专用的图像编辑软件创建和编辑。SVG图像更易于压缩、搜索(适用于制作地图)、索引和脚本化。缩放SVG图像时,图像不变形。可以在任何分辨率下打印高质量的SVG图像。
SVG与Canvas相比的异同如下。
SVG是在XML中描述二维图像的语言;Canvas则在JavaScript程序中绘制二维图像。在SVG中,每一个绘制的图形都会被记录为一个对象,当SVG对象的属性变化时,浏览器会自动重画图形。Canvas图像是逐像素绘制的,一旦图像绘制完成,浏览器就会忘了它。如果图像的位置变化了,那么场景都要重画,包括被该图像覆盖的对象。
2)SVG实例
SVG图像可以保存为.svg文件。
一个画圆的SVG文件,代码如下。
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="/2000/svg"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/></svg>
3)SVG坐标系统
在HTML5中绘制SVG图形时也需要指定坐标。SVG使用的坐标系统与Canvas相同。
4)在HTML5中使用SVG
可以通过下面两种方法在HTML5中使用SVG。
(1)嵌入.svg文件。(2)直接在HTML文档中添加SVG定义代码。
1、嵌入.svg文件
可以使用<embed>标签在HTML文档中引用.svg文件,方法如下。
<embed src="/SVG/circle.svg" width="100%" height="100%" type="image/svg+xml"pluginspage="/svg/viewer/install/" />
pluginspage属性指定下载SVG插件的URL。
在HTML5文档中嵌入circle.svg,代码如下。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style></style></head><body><embed src="/SVG/circle.svg" width="100%" height="100%" type="image/svg+xml"pluginspage="/svg/viewer/install/" /><script></script></body></html>
2、直接在HTML文档中添加SVG定义代码
也可以将SVG代码(从<svg>标签开始,到</svg>标签结束)直接添加在HTML文档中。
直接在HTML文档中添加SVG定义代码,在网页中画圆,代码如下。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style></style></head><body><svg width="100%" height="100%" version="1.1" xmlns="/2000/svg"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg><script></script></body></html>
2、SVG形状
使用SVG可以绘制各种形状,包括直线、折线、矩形、圆形、椭圆和多边形等。
1)绘制直线
在SVG代码中,可以使用<line>标签绘制直线,具体方法如下。
<line x1="x1值" y1="y1值" x2="x2值" y2="y2值" />
x1、y1、x2、y2是必选属性,说明如下。
x1:直线起点的x坐标。y1:直线起点的y坐标。x2:直线终点的x坐标。y2:直线终点的y坐标。
绘制直线,起点坐标为(100,100),终点坐标为(200,200),线的颜色为黑色,线宽为2。代码如下。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style></style></head><body><svg width="100%" height="100%" version="1.1" xmlns="/2000/svg"><line x1="100" y1="100" x2="200" y2="200" stroke="black" / ></svg><script></script></body></html>
stroke属性指定画线的颜色。如果不指定,则默认使用白色。
2)绘制折线
在SVG代码中,可以使用<polyline>标签绘制由一组直线构成的折线,具体方法如下。
<polyline points="x1,y1,x2,y2...xn,yn" />
points属性指定折线中的转折点。其中,(x1,y1)为起点,(xn,yn)为终点。
使用<polyline>标签绘制折线。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style></style></head><body><svg width="100%" height="100%" version="1.1" xmlns="/2000/svg"><polyline points="0,0 50,50 50,100 100,100 100,150" /></svg><script></script></body></html>
可以看到,虽然代码中没有指定填充属性,但系统还是自动使用黑色填充了折线内部的封闭空间。如果只希望看到折线,不希望填充折线内部的封闭空间,则可以将fill属性设置为白色。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style></style></head><body><svg width="100%" height="100%" version="1.1" xmlns="/2000/svg"><polyline points="0,0 50,50 50,100 100,100 100,150" stroke="red" fill="white" /></svg><script></script></body></html>
3)绘制矩形
在SVG代码中,可以使用<rect>标签绘制矩形,具体方法如下。
<rect x="矩形左上角x坐标" y="矩形左上角y坐标" width="矩形的宽度" height="矩形的高度" />
使用<rect>标签绘制矩形。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style></style></head><body><svg width="100%" height="100%" version="1.1" xmlns="/2000/svg"><rect x="50" y="50" width="100" height="50" stroke="blue" /></svg><script></script></body></html>
4)绘制圆形
在SVG代码中,可以使用<circle>标签绘制圆形,具体方法如下。
<circle cx="圆心x坐标" cy="圆心y坐标" r="半径" />
使用<circle>标签绘制圆形。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style></style></head><body><svg width="100%" height="100%" version="1.1" xmlns="/2000/svg"><circle cx="100" cy="100" r="50" /></svg><script></script></body></html>
5)绘制椭圆
在SVG代码中,可以使用<ellipse>标签绘制椭圆形,具体方法如下。
<ellipse cx="圆心x坐标" cy="圆心y坐标" rx="x轴半径" ry="y轴半径" />
使用<ellipse>标签绘制椭圆。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style></style></head><body><svg width="100%" height="100%" version="1.1" xmlns="/2000/svg"><ellipse cx="200" cy="100" rx="100" ry="50" /></svg><script></script></body></html>
6)绘制多边形
在SVG代码中,可以使用<polygon>标签绘制不少于3条边的多边形,具体方法如下。
<polygon points="多边形端点的坐标集" />
多边形端点坐标的表示方法为x、y,不同的端点坐标使用空格分隔,格式如下。
x1,y1 x2,y2 ... xn,yn
使用<polygon>标签绘制多边形。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>*{margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><polygon points="220,100 300,210 170,250 123,234" stroke="blue" /></svg><script></script></body></html>
使用<polygon>标签绘制五角星。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>*{margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><polygon points="100,10 40,180 190,60 10,60 160,180" /></svg><script></script></body></html>
7)路径
路径代表一个可以被填充的形状的外形轮廓。可以使用路径描述当前点的概念。想象SVG是在一张纸上绘图,那么当前点就是画笔的位置。绘图时画笔是移动的,路径就相当于画笔移动的轨迹。可以使用<path>标签定义SVG路径,语法如下。
<path d="路径命令" />
使用SVG路径绘制三角形。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>*{margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><path d="M150 50 L50 250 L250 250" /></svg><script></script></body></html>
使用SVG路径绘制螺旋。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>*{margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><path d="M153 134C153 134 151 134 151 134C151 139 153 144 156 144C164 144 171 139 171 134C171 122 164 114 156 114C142 114 131 122 131 134C131 150 142 164 156 164C175 164 191 150 191 134C191 111 175 94 156 94C131 94 111 111 111 134C111 161 131 184 156 184C186 184 211 161 211 134C211 100 186 74 156 74"style="fill: white;stroke: red" /></svg><script></script></body></html>
3、线条和填充
在进行SVG绘图时,可以指定线条的属性和填充的样式。
1)设置线条的属性
在绘制图形时可以指定线条的颜色、宽度、端点、交点和虚实等属性。
(1)设置线条的颜色
在SVG标签中,可以使用stroke属性指定线条的颜色。例如,下面的代码可以绘制一个蓝色边框的矩形。
<rect x="10" y="10" width="100" height="100" stroke="blue" />
(2)设置线条的透明度
在SVG标签中,可以使用stroke-opacity属性指定线条的透明度,其取值范围为0~1,0表示完全透明,1表示不透明。例如,下面的代码可以绘制一个蓝色边框、透明度为0.5的矩形。
<rect x="10" y="10" width="100" height="100" stroke="blue" stroke-opacity=0.5 />
(3)设置线条的宽度
在SVG标签中,可以使用stroke-width属性指定线条的宽度。例如,下面的代码可以绘制一个蓝色边框、宽度为4的矩形。
<rect x="10" y="10" width="100" height="100" stroke="blue" stroke-width="4" />
(4)设置线条的端点
在SVG标签中,可以使用stroke-linecap属性指定线条的端点样式。stroke-linecap属性的取值范围如下所示。
绘制各种线条端点。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>*{margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><line x1="100" y1="100" x2="200" y2="100" stroke="blue" stroke-width="40" stroke-linecap="butt" /><line x1="100" y1="150" x2="200" y2="150" stroke="blue" stroke-width="40" stroke-linecap="round" /><line x1="100" y1="200" x2="200" y2="200" stroke="blue" stroke-width="40" stroke-linecap="square" /></svg><script></script></body></html>
(5)指定如何绘制交点
在SVG标签中,可以使用stroke-lineJoin属性指定如何绘制线条的交点。stroke-lineJoin属性的取值如下所示。
绘制各种线条交点。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><polyline points="40,80,80,40,120,80" stroke="black" stroke-width="40" stroke-linecap="butt" fill="transparent"stroke-linejoin="miter" /><polyline points="40,160,80,120,120,160" stroke="black" stroke-width="40" stroke-linecap="round"fill="transparent" stroke-linejoin="round" /><polyline points="40,240,80,200,120,240" stroke="black" stroke-width="40" stroke-linecap="square"fill="transparent" stroke-linejoin="bevel" /></svg><script></script></body></html>
(6)指定线条的虚实
在SVG标签中,可以使用stroke-dasharray属性指定线条的虚实。stroke-dasharray属性的值是一组由逗号隔开的整数,每个数字定义了实线段的长度,分别按照绘制、不绘制这个顺序循坏下去。例如,stroke-dasharray="5,5"指定了绘制线条时,先画5个单位的实线,再留5个单位的空格,再画5个单位的实线,以此类推。
绘制各种虚实线条。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><line x1="100" y1="100" x2="400" y2="100" stroke="blue" stroke-width="4" stroke-dasharray="5,5" /><line x1="100" y1="150" x2="400" y2="150" stroke="blue" stroke-width="4" stroke-dasharray="5,10,5" /></svg><script></script></body></html>
2)填充
在使用SVG绘制图形时,可以使用fill属性指定填充的颜色。如果不指定fill属性,则默认使用黑色填充。可以使用fill-opacity属性指定填充的透明度,其取值范围为0~1,0表示完全透明,1表示不透明。
使用SVG绘制一个红色边框、蓝色填充的矩形,再在旁边绘制一个同样颜色的半透明的矩形。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><rect x="10" y="10" width="100" height="100" stroke="red" fill="blue" /><rect x="200" y="10" width="100" height="100" stroke="red" fill="blue" fill-opacity="0.5" /></svg><script></script></body></html>
4、SVG文本与图片
下面是使用SVG在网页中输出文本和图片的方法。
1)输出文本
下面介绍用于输出文本的元素。
(1)text元素
在SVG代码中,可以使用text元素输出文本。text元素包含的属性如下。
x 和 y :定义文本位置的坐标。text-anchor:定义位置(x,y)处于文本的位置,其取值如下所示。
除此之外,还可以使用stroke和fill属性指定文本的边框和填充属性。
在text元素中还可以使用CSS字体属性。
使用SVG输出文本的简单示例。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><text x="450" y="125" font-family="Arial Black" font-size="50" text-anchor="middle"fill="red">HTML5绘制可伸缩矢量图形(SVG)</text></svg><script></script></body></html>
(2)文本区间
使用tspan元素可以定义一个文本区间,它通常出现在text元素中。用于渲染一个区间内的文本,也就是强调显示部分文本。
tspan元素可以包含下面的属性。
x 和 y :定义文本位置的坐标。dx 和 dy :用于设置包含的文本相对于默认的文本位置的偏移量。rotate:用于设置字体的旋转角度。这个属性可以包含一系列数字,应用到每个字符。没有对应设置的字符会使用最后设置的那个数字。
设置SVG文本区间的简单示例。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><text x="450" y="125" font-family="Arial Black" font-size="50" text-anchor="middle"fill="blue">HTML5绘制可伸缩矢量图形<tspan rotate="10 20 45" font-weight="bold" fill="red">SVG</tspan></text></svg><script></script></body></html>
(3)文本引用
可以使用tref属性引用已经定义的text元素。被引用的text元素必须定义id属性。在tref元素中使用xlink:href指定引用的text元素。
提示:文本引用只引用源text元素的文本内容,而不会引用源text元素的样式和属性。
使用SVG文本引用的简单示例。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"xmlns:xlink="/2000/xlink"><text id="example" x="450" y="125" font-family="Arial Black" font-size="50" text-anchor="middle"fill="blue">HTML5绘制可伸缩矢量图形<tspan rotate="10 20 45" font-weight="bold" fill="red">SVG</tspan></text><text x="450" y="250"><tref xlink:href="#example" /></text></svg><script></script></body></html>
(4)文本路径
可以使用textPath元素引用文本路径,即沿指定的路径输出文本。
在textPath元素中使用xlink:href指定引用的路径(path元素)。被引用的path元素必须定义id属性。
提示:使用文本路径可以设计出各种艺术效果。
使用SVG文本路径的简单示例。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><path id="my_path" d="M 20,20 C 80,40 140,40 200,20" style="fill: transparent;stroke: transparent" /><text x="450" y="250"><textPath xlink:href="#my_path">HTML5绘制可伸缩矢量图形</textPath></text></svg><script></script></body></html>
2)SVG图片
在SVG代码中,可以使用image元素显示光栅图片。image元素包含的属性如下所示。
使用SVG显示图片的简单示例。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100%" version="1.1" xmlns="/2000/svg"><image x="450" y="125" xlink:href = "picture.jpg" height="100" width="200" /></svg><script></script></body></html>
5、SVG滤镜
滤镜是图形学的专业术语,主要是用来实现图像的各种特殊效果,可以在Photoshop中体验滤镜的作用。SVG也提供滤镜功能,可以向形状和文本添加特殊的效果。
1)定义滤镜
可以使用<filter>标签定义滤镜,基本语法如下。
<defs><filter id="..."><滤镜类型 属性列表 /></filter></defs>
参数说明如下。
<defs>标签是definitions的简写,表示允许特殊标签的定义。svg滤镜必须在<defs>标签中定义。<filter>标签用于定义滤镜,id指定滤镜的唯一标识。在图形或图像中通过id指定应用此滤镜。滤镜类型,指定滤镜的效果。
定义高斯滤镜。
<defs><filter id="Gaussian_Blur"><feGaussianBlur in="SourceGraphic" stdDeviation="20" /></filter></defs>
in="sourceGraphic"属性指定由整个图像创建效果,stdDeviation属性指定模糊的程度。
2)应用滤镜
在图形和图像元素中,可以在style属性中使用filter:url(#滤镜id)应用指定的滤镜。
在图像元素中应用高斯滤镜的示例。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><defs><filter id="Gaussian_Blur"><feGaussianBlur in="SourceGraphic" stdDeviation="20" /></filter></defs><image x="0" y="0" xlink:href = "picture.jpg" height="300" width="600" /><image x="450" y="0" xlink:href = "picture.jpg" height="300" width="600" style="filter:url(#Gaussian_Blur)" /></svg><script></script></body></html>
6、渐变颜色
与Canvas一样,SVG也支持渐变颜色。渐变是从一种颜色到另一种颜色的平滑过渡,SVG渐变可以分为线性渐变和放射性渐变。SVG渐变必须在<defs>标签中定义。
1)线性渐变
线性渐变也就是颜色沿一条直线渐变。可以使用<linearGradient>定义SVG的线性渐变,语法如下。
<linearGradient id="渐变id" x1="起点x坐标" y1="起点y坐标" x2="终点x坐标" y2="终点y坐标">
<linearGradient>标签定义了线性渐变的id和起点、终点坐标。在SVG图形元素中可以通过线性渐变id来应用它。
<linearGradient>标签中并不包含渐变颜色的信息。需要使用<stop>标签定义,语法如下。
<stop offset="位置百分比" style="stop-color:rgb(255, 0, 0);stop-opacity:1" />
Offset属性用于定义渐变颜色出现的位置,如果为0%,则该颜色出现在线性渐变的起点;如果为0%,则该颜色出现在线性渐变的终点;其他百分比值表示该颜色出现在线性渐变从起点到终点的对应位置。在style属性中,可以通过stop-color指定出现在该位置的颜色,stop-opacity是0~1的数值,用于指定颜色的透明度。
在SVG图形元素中可以通过style="fill:url(#线性渐变id)"来应用线性渐变。
在图形元素中应用线性渐变颜色。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><defs><linearGradient id="grey_blue" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color: rgb(200, 200, 200); stop-opacity: 0;" /><stop offset="100%" style="stop-color: rgb(0, 0, 255); stop-opacity: 1;" /></linearGradient></defs><ellipse cx="230" cy="200" rx="150" ry="100" style="fill:url(#grey_blue)" /></svg><script></script></body></html>
2)放射性渐变
放射性渐变也就是颜色沿一个圆进行发散性渐变。可以使用<radialGradient>标签定义SVG的放射性渐变,语法如下。
<radialGradient id="渐变id" cx="..." cy="..." r="..." fx="..." fy="..." >
放射性渐变需要定义两个圆分别表示颜色变化的起始和终止范围。cx、cy和r属性定义外圈,fx和fy定义内圈。
与<linearGradient>标签一样,<radialGradient>标签中并不包含渐变颜色的信息,也需要使用<stop>标签定义。
在SVG图形元素中可以通过style="fill:url(#渐变id)"来应用放射性渐变。
在图形元素中应用放射性渐变颜色。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100%" height="100vh" version="1.1" xmlns="/2000/svg"><defs><radialGradient id="orange_red" 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;" /></radialGradient></defs><ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)" /></svg><script></script></body></html>
7、变换坐标系
SVG存在两套坐标系统,即视窗坐标系和用户坐标系。默认情况下,用户坐标系与视窗坐标系的点是一 一对应的,原点都在视窗的左上角,x轴水平向右,y轴竖直向下。可以在用户坐标系中对图形进行平移、旋转、倾斜和缩放等变换。
1)视窗变换——viewBox属性
视窗是网页上一个可视的矩形区域,长度和宽度都是有限的。使用viewBox属性可以调整SVG图形在视窗中的显示范围、大小,语法如下。
viewBox = "x0 y0 u_width u_height"
使用viewBox属性后,绘制图形的宽和高的缩放比例分别为u_width/width和u_height/height。
viewBox属性的使用。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="200" height="200" viewBox="0 0 100 200"><rect x="0" y="0" width="200" height="200" fill="Red" /></svg><script></script></body></html>
2)用户坐标系的变换——transform属性
使用transform属性可以对用户坐标系进行变换,语法如下。
<svg 元素 transform="变换操作" />
变换操作包括平移、旋转、倾斜和缩放等。
(1)平移
使用translate属性可以平移指定的svg元素,语法如下。
<svg 元素 transform="translate(x轴平移量,y轴平移量)" />
平移svg元素。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="500" height="500"><rect x="0" y="0" width="200" height="200" fill="Red" transform="translate(30,40)" /></svg><script></script></body></html>
(2)旋转
使用rotate属性可以旋转指定的svg元素,语法如下。
<svg 元素 transform="rotate (旋转的角度)" />
旋转svg元素。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="500" height="500"><rect x="100" y="40" width="20" height="20" fill="Red" transform="rotate(45)" /></svg><script></script></body></html>
(3)倾斜
使用skewX属性可以沿x轴倾斜指定的svg元素,语法如下。
<svg 元素 transform="skewX(倾斜的角度)" />
如果倾斜的角度为正,则向右倾斜,否则向左倾斜。
使用skewY属性可以沿y轴倾斜指定的svg元素,语法如下。
<svg 元素 transform="skewY(倾斜的角度)" />
如果倾斜的角度为正,则向下倾斜,否则向上倾斜。
倾斜svg元素。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="100" height="100"><rect x="0" y="0" width="100" height="100" fill="green" /><circle cx="15" cy="15" r="15" fill="red" /><circle cx="15" cy="15" r="15" fill="yellow" transform="skewX(45)" /><rect x="30" y="30" width="20" height="20" /><rect x="30" y="30" width="20" height="20" transform="skewX(45)" /><rect x="30" y="30" width="20" height="20" transform="skewY(45)" /></svg><script></script></body></html>
(4)缩放
使用scale属性可以缩放指定的svg元素,语法如下。
<svg 元素 transform="scale(缩放的系数)" />
缩放svg元素。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style></head><body><svg width="500" height="500"><text x="20" y="20" font-size="20">缩放(scale)</text><text x="50" y="50" font-size="20" transform="scale(1.5)">缩放(scale)</text></svg><script></script></body></html>