SVG path屬性中d詳解

svg中的有path選擇器來定義路徑。

path選擇器裏屬性有：

d屬性用來定義路徑數據
stroke：描邊顏色
stroke-width:描邊寬度
fill：填充顏色
stroke-dasharray:間隔多少像素繪製一次
stroke-dashoffset:每次繪製偏離多少，必須配合stroke-dasharray使用

d屬性參數有：

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()：關閉路徑

---

根據項目主要學習的是a或者A來記錄

elliptical Arc橢圓弧的記錄以下：

指令：A (絕對) a (相對)
橢圓弧的參數形式：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
詳解參數：rx ry 是橢圓的兩個半軸的長度。
x-axis-rotation 是橢圓相對於座標系的旋轉角度，角度數而非弧度數。
large-arc-flag 是標記繪製大弧(1)仍是小弧(0)部分。
sweep-flag 是標記向順時針(1)仍是逆時針(0)方向繪製。
x y 是圓弧終點的座標。

<div style="width:150px;height:150px;">
    <svg viewBox="0 0 100 100">
        <path d="M 50 50 m 0 -45 a 45 45 0 1 1 0 90" stroke-width="9.8" 
        stroke="#20a0ff" fill="none" stroke-linecap="round" />
        <path d="M 50 50 m 0 45 a 45 45 0 1 1 0 -90" stroke-width="9.8" 
        stroke="#20a0ff" fill="none" stroke-linecap="round" />
    </svg>
</div>

感謝這些博主的知識支持：
https://blog.csdn.net/cuixipi...
https://segmentfault.com/a/11...