先上设计图 要求实现效果

我们可以使用SVG的circle或者path画出任意一段圆弧

<path stroke-width="5" style="transition: 0.5s 0s linear;" fill="none" stroke="#00BCD4" stroke-linecap="round" stroke-linejoin="round" id="arc3" d="M <%print(1600+1600*Math.cos(Math.PI/2+(parseInt((screen.width-20)/6)-20)/1600))%> <%print(1600+1600*Math.sin(Math.PI/2+(parseInt((screen.width-20)/6)-20)/1600))%> A1600 1600 0 0 0 <%print(1600+1600*Math.cos(Math.PI/2-(parseInt((screen.width-20)/6)-20)/1600))%> <%print(1600+1600*Math.sin(Math.PI/2-(parseInt((screen.width-20)/6)-20)/1600))%>"></path>

<path stroke-width="5"  fill="none" stroke="#00BCD4" stroke-linecap="round" 
 d="M 1461 3194 A1600 1600 0 0 0 1511 3197"></path>

path的d属性用来绘制圆弧 “M cx cy A rx ry x-axis-rotation large-arc-flag sweep-flag x y”

cr cy为起点坐标，x y为终点坐标计算方法为(cx,cy为圆心所在坐标)
x=cx+rxcos(π/2+θ)
y=cy−rysin(π/2+θ)
sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。
large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。