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...