A指令用來繪制一段弧線,且.允許弧線不閉合。可以把A命令繪制的弧線想象成是橢圓的某一段,A指令以下有七個參數。
A rx ry 順時針角度 1大弧0小弧 1順時針0逆時針 終點x 終點y
第三個參數,順時針角度,這個參數是針對橢圓弧使用的,如果 rx ry 相等的話,設置這個順時針角度是沒有意義的,默認為0就可以了
下面來看看這個角度對橢圓弧的影響
<path d="M 100,150 a 50 70 90 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />
<path d="M 100,150 a 50 70 0 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />
<circle cx="100" cy="150" r="5" stroke="none" stroke-width="2" fill="red"/>
<path d="M 100,150 a 50 70 -45 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />
我以為 45度 時,起始點會像 0度 90度 那樣,在橢圓的中心軸與圓弧的交點上,結果竟然不是的,也不曉得這個點的規律是什么
已下均以rx、ry相等的情況說明,畫圓弧
當起點終點間的距離大於直徑時,畫的永遠是半圓,只有起點終點間距離小於半徑才能畫大半圓和小半圓。
下面的直徑是200 * 2,起點終點的距離是300,選擇了1(大弧)
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="550"> <path d="M 100 350 A 200 200 0 1 1 400 350" stroke="black" stroke-width="5" fill="none" /> <!-- Mark relevant points --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Label the points --> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="400" y="350" dx="30">B</text> </g> </svg> </body> </html>
下面兩種情況直徑都不大於起點終點間的距離,畫的都是一樣大小的半圓
<path d="M 100 350 A 20 20 0 1 1 400 350" stroke="black" stroke-width="5" fill="none" /> <path d="M 100 350 A 150 150 0 1 1 400 350" stroke="black" stroke-width="5" fill="none" />
畫圓形可以利用相對路徑,A表示絕對路徑,a表示相對路徑
<path d="M 100,150 a 50 50 0 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />
這里的 a 后面的最后兩個參數 0 1,表示x不變,y向下偏移1,最后利用 z 閉合路徑
如果不加z,不閉合的效果如下圖