點選上面這張圖片就可以看到效果~
最近把一個多月前練習的 SVG 拿出來複習
結果發現雖然 path 的參數當初研究了很久
但一陣子沒有接觸又忘記了
所以在這裡做個筆記
也方便以後忘記的時候有個參考~
不過現在許多手機還不能支援 SVG，
但 SVG 老早被納入 W3C 標準
就連早年排斥 SVG 的微軟也讓 IE9 開始支援
我想，未來在 SVG 應用上應該是相當令人期待的~
path 是 SVG 裡頭相當重要的一個繪圖標籤，
有別於畫矩形、圓形、橢圓、貝茲...等形狀，
path 標籤裡頭具有以下七個重要的參數：
M x0,y0 ： 起始點
L x1,y1 ： 第二個點的坐標值
A rx,ty ： 橢圓弧線的長軸和短軸
x-axis-rotation ： 弧線與 x 軸的夾角
large-arc-flag ： 1 為大角度弧線，0 為小角度弧線
sweep-flag ： 1 為順時針方向，0 為逆時針方向
x2,y2 ： 終點座標
我覺得整體來說都還滿容易在腦中想像出整個圖形，
最難想像的莫過於 x-axis-rotation、large-arc-flag、sweep-flag，
因此我直接畫了八個圖形，
做為未來對照和參考使用~
左邊的圖形
<path d="M 150,150 L 250,150 A 100,100 0 1,0 150,250 Z/>
<path d="M 150,150 L 250,150 A 100,100 0 0,0 150,250 Z/>
<path d="M 150,150 L 250,150 A 100,100 0 0,1 150,250 Z/>
<path d="M 150,150 L 250,150 A 100,100 0 1,1 150,250 Z/>
右邊的圖形
<path d="M 400,100 L 450,100 A 50,150 -15 1,0 400,250 Z/>
<path d="M 400,100 L 450,100 A 50,150 -15 0,0 400,250 Z/>
<path d="M 400,100 L 450,100 A 50,150 -15 1,1 400,250 Z/>
<path d="M 400,100 L 450,100 A 50,150 -15 0,1 400,250 Z/>
至於更多的參考
可以看看下面這幾個連結
http://lokvin.iteye.com/blog/137566
http://www.w3schools.com/svg/svg_path.asp
有別於畫矩形、圓形、橢圓、貝茲...等形狀，
path 標籤裡頭具有以下七個重要的參數：
M x0,y0 ： 起始點
L x1,y1 ： 第二個點的坐標值
A rx,ty ： 橢圓弧線的長軸和短軸
x-axis-rotation ： 弧線與 x 軸的夾角
large-arc-flag ： 1 為大角度弧線，0 為小角度弧線
sweep-flag ： 1 為順時針方向，0 為逆時針方向
x2,y2 ： 終點座標
我覺得整體來說都還滿容易在腦中想像出整個圖形，
最難想像的莫過於 x-axis-rotation、large-arc-flag、sweep-flag，
因此我直接畫了八個圖形，
做為未來對照和參考使用~
左邊的圖形
<path d="M 150,150 L 250,150 A 100,100 0 1,0 150,250 Z/>
<path d="M 150,150 L 250,150 A 100,100 0 0,0 150,250 Z/>
<path d="M 150,150 L 250,150 A 100,100 0 0,1 150,250 Z/>
<path d="M 150,150 L 250,150 A 100,100 0 1,1 150,250 Z/>
右邊的圖形
<path d="M 400,100 L 450,100 A 50,150 -15 1,0 400,250 Z/>
<path d="M 400,100 L 450,100 A 50,150 -15 0,0 400,250 Z/>
<path d="M 400,100 L 450,100 A 50,150 -15 1,1 400,250 Z/>
<path d="M 400,100 L 450,100 A 50,150 -15 0,1 400,250 Z/>
至於更多的參考
可以看看下面這幾個連結
http://lokvin.iteye.com/blog/137566
http://www.w3schools.com/svg/svg_path.asp
沒有留言:
張貼留言