如何在HTML5中使用SVG

svg

即

scalable

vector

graphics，是一种用来绘制矢量图的

html5

标签。你只需定义好xml属性，就能获得一致的图像元素。

使用svg之前先将标签加入到html

body中。就像其他的html标签一样，你可以为svg标签为之添加id属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。svg标签跟其它的html标签有通用的属性。你可以用height="100px"

width="200px"

为其添加高度和宽度。

现在就将svg元素加入到我们html代码中，svg提供很多绘图形状，例如线条、圆、多边形等。

svg线条：

svg线条用标签定义，在此标签内你还可以定义其他的属性。

该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:green”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。

svg画圆：

svg提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为mycircle。为了定义圆的中心以及半径，使用cx="55"

cy="55"以及r="50"属性分别定义。使用fill="#219e3e"为圆填充颜色。同样你可以用stroke="#17301d"

stroke-width="2"定义圆周线条颜色和宽度。

svg矩形:

同样的使用标签来画矩形，我们同样设置了

id

属性

“myrectangle”

,用

width="300"

height="100"

定义高宽，使用

fills

属性定义填充颜色。用

strock

定义边框。还有一点需要注意，我用

fill-opacity="0.5"

stroke-opacity="0.5"

为

stroke

和

filling

都添加了透明度。

svg椭圆：

我们同样是用标签来绘制椭圆。设置其

id="myellipse"

，给定起中心坐标

cx="120"cy="60"，长轴短轴半径

rx="100"

ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3f5208stroke:blackstroke-width:3"。

svg多边形：

我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如

points="10,10

75,150

150,60"

，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用

style="fill:#63bcf7stroke:blackstroke-width:3"

定义多边形填充颜色、边框以及边框宽度。

栅格图形 ，也叫做点阵图，位图(bitmap)，像素图，图像是由像素构成的，像素的多少将决定图像的显示质量和文件大小，图像的分辨率越高，其显示越清晰，文件所占的空间也就越大。图像放大时会失真，可以看到整个图像是由很多像素组合而成的。

矢量图形 使用 XML 来描述二维图形和绘图程序，矢量图像在放大或改变尺寸的情况下其图形质量不会有所损失。

<canvas>和<svg>都是HTML5推荐使用的图形技术，Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图形；SVG为矢量，提供一系列图形元素（Rect, Path, Circle, Line …），还有完整的动画，事件机制，本身就能独立使用，也可以嵌入到HTML中，SVG很早就成为了国际标准，目前的稳定版本是1.1 – Scalable Vector Graphics (SVG) 1.1 (Second Edition) ，两者的主要特点见下面的表格：

SVG

Canvas

图形和图表

svg和Canvas都可以表现图表(如柱状图, 散点图, 饼图等等)，常用的图形图表库中，百度的echarts是基于Canvas实现的，D3是基于svg实现的。

xmlns属性可定义SVG 命名空间（如果将SVG内嵌在HTML页面中并作为该页面提供，则不需要xmlns属性）。

使用 <g>元素，可以对多个元素进行分组

path元素是SVG基本形状中功能最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等。

path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列。

下面的命令可用于路径数据：（命令详情可查看 https://segmentfault.com/a/1190000005053782 ）

viewBox的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；高度。

用于svg整体缩放

表示虚线描边。可选值为：none, <dasharray>, inherit. 其中，none表示不是虚线；<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。

表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。

如果stroke-dasharray值很大，超过了描边路径的总长度，加以css动画改变stroke-dashoffset值，就会出现一段时间内描边显示从无到有。

---