svg路径

    在svg中（Path）可以是一个形状的外框，也可以是用来剪裁的（clipping）的路径线条，总之就是“一根线”，他可以被描边，如果是封闭的话可以被填充。

    路径是一系列点的集合，路径可以使用的的描绘方法有：moveto（不进行绘制的动作而把当前点移动到某处）、lineto（从当前点画线段到某处）、curveto（绘制保贝塞尔曲线）、arc（绘制圆弧或椭圆弧）和closepath（封闭路径等）。

    <path>元素的属性有两个：

       d="path data" 定义一组路径数据；

       pathLength="<number>" 路径的总长度，常用来校准svg客户端解释程序所计算的实际路径，不能为负值。

      <path d="M 100 100 L 300 200 L 200 300 z" style="fill:none;stroke:blue;stroke-width:5" />

       其中M表示移动当前点，"M 100 100"指将当前点移到坐标(100,100)的地方；L表示绘制直线，“L 300 200”指的是从当前位置(100,100)画直线到(300,200)处，下一句"L 200 300" 继续画直线到（200，300）；最后z表示完成闭合路径，即将路径首位相连，够惨封闭图像。

      path data的语法要求：

       1.所有绘图指令都只用一个字母完成。

        2.坐标数据和指令之间的空格可以省掉。

       3.同一行中出现同一条命令多次连续重复使用的情况是，命令名可以只使用第一个，后面的省掉。如“M100 100 L300 200 L200 300z”可以写为“M 100 100 L300 200 200 300z”

        4.命令名的大写字母时代表后面所跟的数据值时绝对坐标，小写代表相对坐标。

        5.当绘制水平或垂直线段是，可以使用H或V命令代替L。

        6.一对坐标值的xy坐标之间可以使用空格或逗号隔开，但坐标对与坐标之间只能作为分隔符。

        绘制曲线的命令：

          三次贝塞尔曲线的命令是C和S（包括c和s），C代表绘制普通的三次贝塞尔曲线，语法

“C x1 y1 x2 y2 destx desty",其含义是以前当点作为曲线弧起点，以（x1，y1）为第一控制点，以（x2，y2）为第二控制点，以（destx，desty）为曲线弧终点来绘制三次贝塞尔曲线。c后面可以跟一组坐标值，但组数必须是三的整数倍，否则将出错。当c命令执行完后，当前坐标停留在最后绘制的一段曲线弧的终点上。

          S和s了、命令是绘制”光滑“三次贝塞尔曲线的命令。一条复杂的曲线由多个曲线弧段够惨，弧段与弧段之间要光滑衔接，各个弧段的控制点必须满足一定的条件。首先这一弧段的起点必须是前一弧段的终点，否则连不上；其次，这一段曲线弧的第一控制点必须与前一段曲线弧的第二控制点呈对称关系，对称的终点是这段曲线弧的起点，只有这样才能保证曲线衔接处的光滑。S与s的语法是"s x2 y2 destx desty",省略了光滑曲线弧所隐含的第一个控制点的坐标。命令完成后，当前点的坐标同样停留在最后绘制的一段曲线弧的终点上。

         二次贝塞尔曲线只使用一个控制点，绘制的命令是Q和T，Q绘制普通的二次贝塞尔曲线，语法格式是“Q x1 y1 destx desty"，以（x1,y1）为第一控制点，以（destx,desty）为曲线弧终点来绘制二次贝塞尔曲线。其后也可以跟一组坐标值，但组数必须是偶数，否则将出错。绘制光滑的二次贝塞尔曲线的命令是T，前后相邻的控制点必须对称。列“T destx desty”省略了光滑曲线弧所隐含的控制点坐标。

        椭圆弧曲线命令

       命令A或a 格式“A rx ry x-axis-rotation large-arc-flag sweep-flag x y”

       说明：rx椭圆的长半轴，ry椭圆的短半轴；“x-axis-rotation” 是此段弧所在的椭圆的x轴与水平方向的夹角，即x轴的旋转角度；"large-arc-flag" 和 “sweep-flag”决定了椭圆弧的绘制方向，值是0或1；（x，y）是椭圆弧的终点坐标。