共计 1120 个字符，预计需要花费 3 分钟才能阅读完成。
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…
