svg中path標籤的用法

svg的

元素用於定義一些複雜的圖形。是svg基本圖形中最為複雜的。

**結構：：：m開始  到  z關閉路徑

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軸水平向下。

-允許小寫字母；大寫絕對定位，參照全域性座標系（50到100）；小寫相對定位，參照父容器座標系(50+100=150)。

-同一指令出現多次可以只用乙個。

繪製工作

是在 元素中 d屬性來完成，m命令代表「move to」（移動到），a命令代表「arc」（弧線），l命令代表「line」（直線），命令都由一支「虛擬的畫筆」來執行。

在元素的d屬性中：

第乙個命令是m 移動命令，目的為確定繪畫的起始點。

1、弧線a

畫半徑a指令有2個引數： *rx水平方向上的半徑， *ry垂直方向上的半徑。

：：：：當值相同，將得到乙個指定為正圓的弧線；當值不同，將得到乙個指定為橢圓形的弧線。

例：a30,30 0 0,1 70,70

第乙個引數：rxx軸水平向上半徑（起始點 30,30

第二個引數：ryy軸垂直向上半徑（結束點 70,70

第三個引數：x-axis-rotation設定弧線x軸方向上的旋轉，通常不需要改變這個引數，預設值為0。

第四個引數：大小弧形,是否映象0,0 1,0 1,1 0,1

large-arc-flag標誌位，決定是否繪製長 / 短的 弧線，值的範圍0/1；0以小弧形繪製，1以大弧形繪製。

sweep-flag標誌位，決定是否沿開始點到結束點的直線來映象弧線。主要是控制弧線的繪製方向，順時針或逆時針繪製，類似「映象」效果。值的範圍0/1；0不映象弧線，1映象弧線。

2、 二次貝茲曲線q

q命令和直線的原理相同，僅2個引數

第乙個引數：控制點(x,y)，決定曲線的弧度。控制點能夠像磁鐵一樣拉伸曲線；控制點越接近弧線，弧線越平滑，弧度越大。

第二個引數：結束位置(x,y)

m50,50 q50,200 100,100 意思是：：

從（50,50）開始到（100,100）位置結束，控制點的位置在（50,100）的位置

3、 閉合路徑z

指將最後的乙個繪製點連線到開始點。

大小寫沒有區別

4、 路徑填充fill

使用css語法

向量圖形轉path資料。

最簡單的是用expression design軟體工具。將向量圖形 貼上到軟體中，來匯出xaml silverlight 格式的向量圖形

文字轉path資料。

用expression blend 軟體工具，文字轉成圖形，相當於印刷行業裡的文字轉曲

自己手動寫 圖形/文字 path資料。這也是最難的方式。用design生成的資料量很大，手寫就會變得很簡潔。

例圖：

svg中path標籤的用法

除了上次的六個普通標籤之外，svg還支援複雜的路徑標籤 path 使用path標籤時，就像用指令的方式來控制乙隻畫筆，比如 移動畫筆到某一座標位置，畫一條線，畫一條曲線，完事了抬起畫筆，over！path支援的指令有 m moveto m x,y 將畫筆移動到指定的座標位置 l lineto l x...

svg中的path指令分析

使用path標籤時，就像用指令的方式來控制乙隻畫筆，比如 移動畫筆到某一座標位置，畫一條線，畫一條曲線，完事了抬起畫筆，over！path支援的指令有 m moveto m x,y 將畫筆移動到指定的座標位置 l lineto l x,y 畫直線到指定的座標位置 h horizontal linet...

利用SVG中path實現平滑曲線

svg中實現直線很簡單，但是實現曲線稍略顯複雜！在實際的開發場景中直線不能滿足很多的需求，如下圖所示各個圖形之間採用曲線連線，如果換成直線整個風格就略顯僵硬，所以曲線在很多場合下還是比較適用的。直線採用svg中的line元素，如下所示 上面的 很簡潔，x1,y1 表示起點的座標，x2,y2 表示終點...