使用path標籤時，就像用指令的方式來控制乙隻畫筆，比如：移動畫筆到某一座標位置，畫一條線，畫一條曲線，完事了抬起畫筆，over！
path支援的指令有：
m = moveto(m x,y) ：將畫筆移動到指定的座標位置
l = lineto(l x,y) ：畫直線到指定的座標位置
h = horizontal lineto(h x)：畫水平線到指定的x座標位置
v = vertical lineto(v y)：畫垂直線到指定的y座標位置
c = curveto(c x1,y1,x2,y2,endx,endy)：三次貝賽曲線
s = smooth curveto(s x2,y2,endx,endy)
q = quadratic belzier curve(q x,y,endx,endy)：二次貝賽曲線
t = smooth quadratic belzier curveto(t endx,endy)：對映
a = elliptical arc(a rx,ry,xrotation,flag1,flag2,x,y)：弧線
z = closepath()：關閉路徑
其中藍色的指令是我常用的，綠色的目前為止還沒有用到
一、說明：
座標軸為以(0,0)為中心，x軸水平向右，y軸水平向下。
所有指令大小寫均可。大寫絕對定位，參照全域性座標系；小寫相對定位，參照父容器座標系
指令和資料間的空格可以省略
同一指令出現多次可以只用乙個
二、指令
1、l h v指令
m 起點x，起點y l（直線）終點x，終點y h（水平線）終點x v（垂直線）終點y
如：m 10,20 l 80,50 m 10,20 v 50 m 10,20 h 90
2、a指令
允許不閉合。可以想像成是橢圓的某一段，共七個引數：
a rx,ry,xrotation,flag1,flag2,x,y
rx,ry指所在橢圓的半軸大小
xrotation指橢圓的x軸與水平方向順時針方向夾角，可以想像成乙個水平的橢圓繞中心點順時針旋轉xrotation的角度。
flag1只有兩個值，1表示大角度弧線，0為小角度弧線。
flag2只有兩個值，確定從起點至終點的方向，1為順時針，0為逆時針
x,y為終點座標
如：m 200,250 a 150,30 0 1 0 0,70
svg中path標籤的用法
除了上次的六個普通標籤之外，svg還支援複雜的路徑標籤 path 使用path標籤時，就像用指令的方式來控制乙隻畫筆，比如 移動畫筆到某一座標位置，畫一條線，畫一條曲線，完事了抬起畫筆，over！path支援的指令有 m moveto m x,y 將畫筆移動到指定的座標位置 l lineto l x...
svg中path標籤的用法
svg的 元素用於定義一些複雜的圖形。是svg基本圖形中最為複雜的。結構 m開始 到 z關閉路徑定義路徑資料命令 m moveto m x,y 將畫筆移動到指定的座標位置 l lineto l x,y 畫直線到指定的座標位置 h horizontal lineto h x 畫水平線到指定的x座標位置...
利用SVG中path實現平滑曲線
svg中實現直線很簡單，但是實現曲線稍略顯複雜！在實際的開發場景中直線不能滿足很多的需求，如下圖所示各個圖形之間採用曲線連線，如果換成直線整個風格就略顯僵硬，所以曲線在很多場合下還是比較適用的。直線採用svg中的line元素，如下所示 上面的 很簡潔，x1,y1 表示起點的座標，x2,y2 表示終點...