svg中畫半圓

svg中有一個標簽path，主要表示路徑的意思，當我們畫一個半圓的時候，如圖：

<svg>
        <!-- 背景布 -->
        <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="black" stroke-width="1" />
        <!-- 半圓對象 -->
        <path d="M 100 100 A 50 50 0 0 1 120 60 L150 100" stroke="black"  fill="blue" />
    </svg>

半圓對象中一共出現了 三個主要字母   L  M  A   分別對應文中圖片的1 2 3 你可以理解為  LMA（老妹啊）

L指令

L指令為中心點，也就是圖中點1，

文中L150 100  我把他修改為 L200 100時  中心點會往右偏移，如圖所示：

<path d="M 100 100 A 50 50 0 0 1 120 60 L200 100" stroke="black"  fill="blue" />

M指令

M指令為連線點，也就是圖中2

M指令有兩個參數：上邊連線點X坐標 上邊連線點Y坐標

M指令由M 100 100改為M 50 100後：

<path d="M 50 100 A 50 50 0 0 1 120 60 L150 100" stroke="black"  fill="blue" />

A指令

A指令有七個數值，代表不同的意思

1. rx（畫出半圓中唯一一條弧線所需的半徑）
2. ry（同上，rx不等於ry時為橢圓）
3. 順時針角度（rx、ry相等時設置無效）
4. 1大弧0小弧（使用rx、ry所畫出的圓中兩點之間的一側大弧弧度還是一側小狐弧度），示例中參數使用的0
5. 1順時針0逆時針（rx、ry所畫的弧度是按照順時針方向放置還是逆時針方向放置即圓弧在半圓兩條線交叉角度中是外凸還是內凹），示例中參數使用的1
6. 下邊連線點即終點，圖中3點X坐標
7. 下邊連線點即終點，圖中3點Y坐標

畫整個半圓

<svg>
  <!-- 背景布 -->
  <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="black" stroke-width="1" />
  <!-- 圓對象 -->
  <path d="M 100 100 A 50 50 0 0 1 200 100 " stroke="black"  fill="blue" />
</svg>

會發現我沒有寫L （老） 就剩下M A（妹啊）因為畫半圓中心點自動就可以畫出來了  不用設置了，去掉老是不是感覺年輕了