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"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/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="http://www.adobe.com/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="http://www.adobe.com/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="http://www.w3.org/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="http://www.w3.org/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="http://www.w3.org/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="http://www.w3.org/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="http://www.w3.org/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="http://www.w3.org/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="http://www.w3.org/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="http://www.w3.org/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="http://www.w3.org/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的路径命令**
命令	命令格式	具体描述
M	M X Y	移动至（X，Y）
L	L X Y	画直线至（X，Y），起点为当前点
H	H X	画水平线。起点为当前点，终点的X坐标为参数X，终点的Y坐标与当前点的Y坐标相同
V	V Y	画垂直线。起点为当前点，终点的Y坐标为参数Y，终点的X坐标与当前点的X坐标相同
C	C X1 Y1 X2 Y2 ENDX ENDY	绘制曲线（三次方贝塞曲线）
S	S X2 Y2 ENDX ENDY	绘制流畅曲线
Q	Q X Y ENDX ENDY	绘制二次方贝塞曲线
T	T ENDX，ENDY	绘制流畅二次方贝塞曲线
A	A RX RY XROTATION FLAG1 FLAG2 X Y	绘制椭圆，参数说明如下。 RX，RY，椭圆的半轴大小 XROTATION，椭圆的X轴与水平方向得到的顺时针方向夹角。可以想象成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度 FLAG1，只有两个值，1表示大角度弧线，0表示小角度弧线 FLAG2，只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针 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="100%" height="100vh" version="1.1" xmlns="http://www.w3.org/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="http://www.w3.org/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属性的取值范围如下所示。

**stroke-linecap属性的取值**
取值	具体描述
butt	默认值，指定线段没有线帽。线条的末点是平直的，而且和线条的方向正交，这条线段在其端点之外没有扩展
round	指定线段带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半
square	指定线段一个矩形线帽。这个值和butt一样，但是线段扩展了自己宽度的一半

绘制各种线条端点。

<!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="http://www.w3.org/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属性的取值如下所示。

**stroke-lineJoin属性的取值**
取值	具体描述
miter	默认值，指定线段的外边缘一直扩展到它们相交。当两条线段以一个锐角相交时，斜角连接可能变得很长
round	指定顶点的外边缘应该和一个填充的弧接合，这个弧的直径等于线段的宽度
bevel	指定顶点的外边缘应该和一个填充的三角形相交

绘制各种线条交点。

<!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="http://www.w3.org/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="http://www.w3.org/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="http://www.w3.org/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）处于文本的位置，其取值如下所示。

**text-anchor属性的取值**
取值	具体描述
start	表示文本位置坐标（x，y）位于文本的开始处，文本从这点开始向右逐一显示
middle	表示（x，y）位于文本中间处，文本向左右两个方向显示，也就是居中显示
end	表示（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="http://www.w3.org/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="http://www.w3.org/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="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/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="http://www.w3.org/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元素包含的属性如下所示。

**image元素包含的属性**
取值	具体描述
x，y	表示图片位置，坐标（x，y）位于图片的左上角
xlink:href	指定图片的链接
height	图片的高度
width	图片的宽度

使用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="http://www.w3.org/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指定应用此滤镜。
滤镜类型，指定滤镜的效果。

**SVG支持的滤镜类型**
滤镜类型	具体描述
feBlend	使用不同的混合模式把两个对象合成在一起
feColorMatrix	应用matrix转换
feComponentTransfer	执行数据的component-wise重映射
feComposite	将反射光源的结果与原始来源图形结合
feConvolveMatrix	矩阵卷积效果
feDiffuseLighting	调整图像等的光照
feDisplacementMap	图像间的像素移动
feFlood	使用不同的混合模式把两个对象合成在一起
feGaussianBlur	对图像执行高斯模糊
feImage	指定外部图像作为原始图像的一部分应用滤镜
feMerge	创建累积而上的图像
feMorphology	对源图形执行fattening或者thinning
feOffset	相对于图形的当前位置来移动图像
feSpecularLighting	调整图像等的光照
feTile	使用指定图像以平铺方式填充一个矩形
feTurbulence	基于Perlin噪声函数创建一个图像
feDistantLight	定义远光源
fePointLight	定义点光源
feSpotLight	定义聚光灯光源

定义高斯滤镜。

<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="http://www.w3.org/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="http://www.w3.org/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="http://www.w3.org/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>

绘制可伸缩矢量图形（SVG）相关推荐

基于html5的矢量图绘制方法研究,HTML5程序设计-绘制可伸缩矢量图形SVG.pdf
HTML5基础教程(第2版) 授课教师: 职务: 第7章绘制可伸缩矢量图形(SVG ) 课程描述 SVG是Scalable Vector Graphics的缩写,即可伸缩矢量图形,它使用XML格式 ...
HTML5矢量图形SVG
1.1.1 什么是SVG? SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG是一种使用xml技术描述图形的语言,使用 XML 格式定义图像. SVG指可伸缩矢量 ...
SVG可伸缩矢量图形绘制钟表
SVG可伸缩矢量图形是一种图片格式.名字中的"矢量"代表着它与GIF,JPEG,PNG等指定像素阵的光栅(raster)图片格式有根本区别.它是一种对绘制期望图形的精确的.分辨率无 ...
矢量图形SVG高级动画
前言 SVG,全名Scalable Vector Graphics可伸缩矢量图形,这种图像格式在前端已经是非常广泛了 ,矢量图像: SVG是W3C退出的一种开放标准的文本格式的矢量 ...
使用ABAP绘制可伸缩矢量图
Jerry去年的文章动手使用ABAP Channel开发一些小工具,提升日常工作效率里曾经介绍过一些用ABAP实现的可供娱乐的小程序,比如用古老的HPGL接口在SAPGUI里绘图: 关于如何用SA ...
XML教程和SVG可伸缩矢量图形 (Scalable Vector Graphics)教程
XML教程 http://www.woyouxian.net/xml/xml_index.html 写的很好诶 SVG教程 http://www.woyouxian.net/z/web/svg/ind ...
matplotlib绘制矢量图像(svg),pdf and ps文件
机器学习的过程中处理数据,会遇到数据可视化的问题．大部分都是利用python的matplotlib库进行数据的可视化处理． plt.show() 默认都是输出.png文件,图片只要稍微放大一点,就糊 ...
python 绘制图表生成svg文件_python用Pygal如何生成漂亮的SVG图像详解
前言 SVG可以算是目前最最火热的图像文件格式了,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形.它是基于XML(Extensible Markup Langu ...
greensock下载_使用GreenSock绘制Alligator.io SVG徽标
greensock下载 To get the most out of this article it is important that you have a solid understanding ...

绘制可伸缩矢量图形（SVG）