SVG基本图形的创建和动画详解——1

一.引言

SVG全称为“Scalable Vector Graphics”，意为可缩放矢量图形。而什么是矢量图？矢量就是向量，所以矢量图就意味着无限缩放而不改变图片的质量。
　　多说无益，下面放MDN上关于SVG的定义：

SVG是XML语言的一种形式，有点类似XHTML，它可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以变形，可以合成，还可以通过滤镜完全改变外观。

SO~你可以像创建html dom元素一样，用类似的标签来愉快的创建各种矢量图形。当然，SVG有一套自己的规范。老规矩，关门放MDN：

HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。一个简单的SVG文档由

二.简单图形的创建

线(line)

<svg width="100" height="100">
　　<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

结果：
　　这是SVG线条
　　上诉标签<line />就是SVG专门用来创建线的元素。其中X1与y1代表第一个坐标在X轴和Y轴中的位置，X2，Y2以此类推。
而最终出现的图形就是这两个点连起来形成的闭合路径。

2.折线(polyline)

<svg width="200" height="200">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

结果：
　　这是SVG折线
　　
　　上述标签<polyline/>就是SVG专门用来创建折线的元素。关于points的详细解释请看下面的多边形(polygon)。

3.矩形(rect)

<svg width="200" height="100">
   <rect width="200"height="100"　style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>

结果：
　　这是SVG rect矩形
　　<rect />就是SVG专门用来创建矩形的元素。且无需设定坐标。
　　
　　
4.圆形(circle)

<svg width="200" height="100">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

结果：
　　这是SVG圆形
　　<circle />就是SVG专门用来创建圆形的元素。cx和cy表示圆心的坐标，r表示圆的半径。
　
　　
5.椭圆(ellipse)

<svg width="200" height="100">
  <ellipse cx="100" cy="50" rx="90" ry="40" style="fill:yellow" />
</svg>

结果：
　　这是SVG椭圆
　　<ellipse />就是SVG专门用来创建椭圆形的元素。cx和cy表示圆心的坐标，rx表示圆心到椭圆左右两侧的半径，ry表示圆心到椭圆上下两侧的半径。
　　
　　
6.多边形(polygon)

6.1 三角形

<svg width="200" height="100">
  <polygon points="100,0 40,80 160,80" style="fill:gray" />
</svg>

结果：
　　这是SVG polygon 三角形
　　<polygon />在用来创建多边形时，关键的属性就在于points。以上面那个例子来说，“100,0”为一个坐标，分别表示这个点在x轴和y轴的位置。坐标点与坐标点之间以空格分开。最终的图形就是这几个点连起来成的闭合路径形成的图案。
　　
6.2 矩形

<svg width="500" height="500">
  <polygon points="10,10 170,10 170,80 10,80" style="fill:gray" />
</svg>

结果：
　　这是SVG polygon矩形
　　由此可见，<polygon />也可以用来创建矩形。

6.3 六边形

<svg width="500" height="500">
  <polygon points="0,40 30,0 100,0 130,40 100,80 30,80" style="fill:gray" />
</svg>

结果：
　　这是SVG polygon六边形
　　从这个points里的坐标点可以看出，svg渲染points里的点是从左往右渲染的，也就是说你在写坐标点时也要按照这个顺序来。
　　
6.4 星形

<svg width="200" height="200">
  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:gray;"/>
</svg>

结果：
　　这是SVG polygon星形
　这个星形就是同通过按顺序描点连线后生成的图形，描点顺序大概如下：
　星形描点顺序
　所以只要捋清楚你要画的图形的描点顺序和大概坐标，就可以画出很多复杂的图形。

三.复杂图形的创建

复杂图形的创建，要用到<path />这个元素。
MDN对path的解释为:

path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。

当然，<path />里也提供了一个重要的属性来绘制图形，那就是d。MDN上对 path d属性的描述如下：

The d attribute provides a path definition to be drawn.
A path definition is a list of path commands where each command is made of a letter and some numbers representing the parameter of the command. All possible commands are detailed below.

大概意思就是：

d属性提供了要绘制的路径定义。
路径定义是路径命令的列表，其中每个命令都由一个字母组成，一些数字表示命令的参数。所有可能的命令如下所示。

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

需要注意的一点是，以上所有命令都可以才用大小写，大写代表绝对定位，小写代表相对定位(比如相对上一个节点移动10px)
下面我们就讲讲这些命令的含义：

M ：【绘制作图开始点】
L ：【绘制作图结束点】
H ：【绘制平行线】
V ：【绘制垂直线】
C ：【三次贝塞尔曲线】
S ：【简写三次贝塞尔曲线】
Q ：【二次贝塞尔曲线】
T ：【简写二次贝塞尔曲线】
A ：【绘制椭圆弧】
Z ：【闭合路径】

下面根据顺序举例：

1. M 10 10表示需要移动到的点的x轴和y轴的坐标。
2. L 10 20表示在当前位置和新位置（L前面画笔所在的点）之间画一条线段。
3. H 30表示绘制一段30的水平线。
4. V 20表示绘制一段20的垂直线。

5.三次贝塞尔曲线C：

C x1 y1, x2 y2, x y
(x,y)表示的是曲线的终点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。
控制点描述的是曲线起始点的斜率。

<svg width="200" height="100">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
</svg>

如下图：
这里写图片描述

什么意思呢？从M声明的(10,10)到C的最后一个坐标(50,10)。而这条曲线曲折的程度这取决于两个控制点的斜率。起点的斜率是M(10,10)与C(20,20)连成的起点的直线的斜率。这条直线就是起点沿起点控制点的切线。终点的斜率以此类推。

6.简写三次贝塞尔曲线S

S x2 y2, x y
如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。

<svg width="190px" height="160px" >
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

如下图：
这里写图片描述
也就是说，当你需要对称的曲线时，你可以使用S指令。

7.二次贝塞尔曲线Q

Q x1 y1, x y
二次贝塞尔曲线Q，只需要一个控制点和一个终点坐标。

<svg width="190px" height="160px">
  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

如下图：
这里写图片描述

8.简写二次贝塞尔曲线T

T x y
T只需要一个控制点就可以绘制出与上一条曲线对称的曲线。

<svg width="190px" height="160px">
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

如下图：
这里写图片描述
需要注意的是，在使用T命令时要确保它的前面是一个Q命令或者T命令。如果单独使用了T命令，会绘制出一条直线，因为控制点和终点会被认为是一个点。

9.弧形A

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

以下是各参数的含义(可对照椭圆<ellipse />的参数含义)：

rx ry ：椭圆的两个半轴的长度。
x-axis-rotation ：椭圆相对于坐标系的旋转角度，角度数而非弧度数。
large-arc-flag ：标记绘制大弧(1)还是小弧(0)部分。
sweep-flag ：标记向顺时针(1)还是逆时针(0)方向绘制。
x y ：圆弧终点的坐标。

<svg width="320px" height="320px">
  <path d="M10 315 L110 215 A30 50 0 0 1 162.55 162.45 L172.55 152.45 A30 50 -45 0 1 215.1 109.9 L315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

如下图：
这里写图片描述

10.闭合路径Z
这个就不用过多解释了。在某些情况下使用Z命令可以省下写L命令来闭合路径。

SVG基本图形的创建大概就这些，下一节我们聊聊SVG的动画模块，以及SVG动画的内存回收。

四.参考资料

[SVG教程-MDN][1]
[SVG -菜鸟教程][2]
[1]: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
[2]: http://www.runoob.com/svg/svg-path.html