1.基础使用
Document1.1 viewBox
viewBox 属性定义了SVG中可以显示的区域
语法为：viewBox =" x y w h " x、y为起始点，w、h为显示区域的宽高
效果图为：
1.2 version
version 属性用于指明SVG版本，version 属性纯粹为一个声明，对渲染或处理没有任何影响。切目前只有1.0和1.1两个版本
1.3 xmlns 和 xmlns:xlink
xmlns用于声明命名空间（namespace），在此声明之下的所有子标签都属于这个空间内。这里看起来是一个url，但实际上仅仅是一个字符串，这样使用只是惯例。因此很多时候都会被称为”namespace url” 而不是”namespace name”。
当我们在SVG中加入xmlns时，因为它定义了默认命名空间，因此不需要前缀，我们直接在SVG标签中写一个a标签，a标签和UA就知道它是SVG的a标签而不是HTML的a标签
xmlns:xlink 表示前缀为xlink的标签和属性，应该由理解该规范的UA 使用xlink规范 来解释。
2. 基本图形
基本图形就是插入到SVG标签中的元素
2.1 圆形 circle
circle标签会绘制一个圆形
语法：
属性：cx、cy为园的坐标，r为圆的半径
示例：
2.2 矩形 rect
rect标签会绘制一个矩形
语法：
属性：x、y为矩形的起始点坐标，rx、ry为圆角 x、y轴方向的半径，width、height为矩形的宽高
示例：
2.3 椭圆形 ellipse
ellipse标签比circle标签功能更强大，ellipse 标签也可以绘制圆形，并且还可以分别缩放圆形的长轴半径和短轴半径，从而达到椭圆效果
语法：
属性：cx、cy为椭圆的坐标，rx为椭圆的x轴半径 ry为椭圆的y轴半径
示例：
2.4 线条line
line标签可以根据两点的坐标绘制一条直线
语法：
属性：x1、y1为起点坐标 ，x2、y2为终点坐标
示例：
2.5 折线 polyline
polyline标签可以把很多个点链接在一起成为一条折线。
语法：
属性：points为点集数列，其中每个点都必须包含2个数字，一个x坐标一个y坐标
示例：
2.6 多边形 polygon
polygon标签和polyline标签类似，都是由很多个点链接在一起的。但不同的是polygon路径中的最后一个点和第一个点是默认闭合的。
语法：
属性：points为点集数列，其中每个点都必须包含2个数字，一个x坐标一个y坐标
示例：
2.7 路径 path
path标签是所有图像中最复杂的，也是最强的。最常用的图像就是path,他可以绘制圆形、椭圆、矩形、线条、折线、多边形、贝塞尔曲线等
语法：
属性：d为一个点集数列以及其它绘制路径的信息
示例：
3. 命令
path 标签的图形形状是通过属性d定义的，属性d的值是以：命令 + 参数的形式进行组合，命令又是通过关键字表示
- M = Move to
- L = Line to
- H = Horizontal Line to
- V = Vertical Line to
- Q = Quadratic Bezier Curve to
- T = Smooth Quadratic Bezier Curve to
- C = Curve to
- S = Smooth Curve to
- A = Elliptical Arc
- Z = close path
3.1直线命令
直线命令是通过两个点画他们的直线
注意：以下所有命令中大写为绝对定位小写为相对定位，后续的命令亦如此
3.1.1 M(Move to)
- M命令是把画笔移动到某个点，就好像画笔提起来以后移动到一个新位置准备开始绘制。但因为仅仅是移动画笔而没有绘制，所以M命令经常出现在路径的起始点，用来指明画笔应该从何处开始绘制
- 每一段路径都必须以M命令开头，如果有多个M命令则表示新路径开始
- 语法： M x y 或者 m x y
- 参数：x y 为坐标
3.1.2 L(Line to)
- L命令会绘制一点并且和之前的点连成一条直线
- 语法：L x y 或者 l x y
- 参数：x、y为坐标
3.1.3 H (Horizontal Line to)
- H命令可以从之前的点绘制一条水平的直线，H命令可以等价于y值和之前点相同的L命令
- 语法：H x 或者 h x
- 参数：x为X轴坐标
- 示例：
3.1.4 V (Vertical Line to)
- V命令可以从之前的点绘制垂直的直线，V命令可以等价于x值和之前点相同的L命令
- 语法：V y 或者 V y
- 参数：y为Y轴坐标
- 示例：
3.1.5 Z(close path)
Z命令是一个闭合命令，他会从当前点画一条直线到路径的起始点
Z命令没有参数所以Z和z的效果一样 ，所以不区分大小写
- 语法：Z 或者 z
- 参数：无
- 示例：
3.2 曲线命令
绘制曲线
3.2.1 Q(Quadratic Bezier Curve to)
Q命令可以用来绘制一条二次贝塞尔曲线，二次贝塞尔曲线需要一个控制点，用来确定起点和终点的曲线斜率
- 语法：Q x1 y1，x y 或者 q x1 y1,x y
- 参数：x 、y为终点位置，x1、y1为控制点
- 示例：
3.2.2 T (Smooth Quadratic Bezier Curve to)
T命令是一个延长二次贝塞尔曲线的简化命令，T命令可以通过前一个控制点推断出后一个控制点，这也是为什么T命令只需要一个坐标的原因
需要注意的是T命令的前面必须有一个Q命令或者其他的T命令。如果T命令单独使用，那么控制点就会认为和终点是一个点，所以画出来的是一条直线
- 语法：T x y或者 t x y
- 参数：x 、y为终点位置
- 示例：
