SVG简单使用

什么是SVG

SVG 即可伸缩矢量图形 (Scalable Vector Graphics)。SVG 使用 XML 格式定义图像。

简单使用SVG

我们打开SVG网页编辑器 ：http://www.86y.org/demo/svg/可以看到如下界面

SVG

我们下边在这个图上做一些简单的编辑

1. 画一个五角星

点击箭头指向，然后在图纸上就可以划出五角星了

点击箭头所指可以查看源码：

五角星 五角星源码

源码解析

看到上边的源码我们就要了解一下了。

圆

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

SVG必须以标签<svg>开始，以</svg>结束。这是根元素。

<circle>是圆标签，cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

注释：所有的开启标签必须有关闭标签！

运行结果：

圆

SVG路径语法<path>

svg有很多标签语法，直线、矩形、圆、折线等等，有兴趣的同学可以在这里查看SVG,我们这里重点介绍一下<path>标签，因为path标签在实际应用中（自定义图标）应该是使用的最多的标签。

<path>元素用于定义一个路径。

下面的命令可用于路径数据：

    M = move to 需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。类似于移动画笔的位置。

    L = line to 需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。

    H = horizontal line to和 V = vertical line to 这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动

    C = curve to 三次贝塞尔曲线。(x,y)表示的是曲线的终点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。

    S = smooth curve to当一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变），可以使用S命令。简写的贝塞尔曲线命令。如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。

    Q = quadratic Bézier curve 二次贝塞尔曲线Q，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。

    T = smooth quadratic Bézier curve to 与S命令相似，是Q命令的简写命令

    Z = closepath Z命令会从当前点画一条直线到路径的起点。不区分大小写

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。