svg用path畫半圓


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,不閉合的效果如下圖

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM