svg(1) path路径

注： 笔记来自于http://www.jb51.net/html5/72250.html  以及http://blog.csdn.net/u013291076/article/details/27078345，本文引用纯粹为了用于了解path路径，当做笔记记录。

基础：

<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />

path标签通过属性d来定义路径，定义信息由一段字符串构成，另外path也可以通过fill和stroke属性来定义填充和边框。
d属性的信息其实并不复杂，由字母和数字构成，数字表示坐标点，字母负责表示如何连接这些坐标点。比如上面的示例中，M表示起点，L表示直线连接，所以d的信息可以这样解读：

M100,100    ->    以（100，100）坐标点为起点
L200,200    ->    从（100，100）向（200，200）画一条直线
L200,400    ->    从（200，200）向（200，400）画一条直线

在path标签的d属性中，一共有10个命令可以使用，下面5个命令是基础，比较简单。

M     移动到（moveTo）    x,y    开始点坐标
Z    闭合路径（closepath）    将路径的开始和结束点用直线连接
L    直线（lineTo）    x,y    当前节点到指定(x,y)节点，直线连接
H    水平直线    x    保持当前点的y坐标不变，x轴移动到x，形成水平线
V    垂直直线    y    保持当前点的x坐标不变，y轴移动到y，形成垂直线

绘制圆弧指令：A  rx ry x-axis-rotation large-arc-flag sweep-flag x y
用圆弧连接2个点比较复杂，情况也很多，所以这个命令有7个参数，分别控制曲线的的各个属性。下面解释一下数值的含义：
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针转动的角度。
large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。
sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。
x,y 是弧终端坐标。
前两个参数和后两个参数就不多说了，很简单；下面就说说中间的3个参数：
x-axis-rotation代表旋转的角度，体会下面例子中圆弧的不同：

复制代码

代码如下:

<svg width="320px" height="320px">
<path d="M10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

上面的HTML画出下面的图形：

 

 
从图中可以看到椭圆旋转参数的不同导致绘制的圆弧方向不同，当然这个参数对正圆来说没有影响。