SVG弧形进度环实现

最近作的一个页面，有个类进度的圆弧环UI，之前实现过圆环进度条，此次复习了一下，还学习到了一些细节点。

自从用了svg以后，发现其实稍微复杂点的UI，用SVG玩还挺简单的。

咱们能够这么分解svg：一个底色的圆弧和一个同线宽的实色圆弧

那么怎么实现圆弧呢？
先要了解svg能怎么实现的这个问题，svg的哪些元素能实现？

圆弧能够用path来实现

具体一点就是用path的弧形命令A：

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

A命令能够画椭圆和圆形，rx ry分别表示两个轴的半径，x-axis-rotatio表示x轴的旋转状况，我这里的圆弧是正置的，因此值设为0便可。
large-arc-flag表示圆弧是否大弧度，而sweep-flag表示起点到终点的方向是逆时针仍是顺时针，这两个值的解释，在mdn有详细说明和图文解释了，这里就很少说，这里实现的话，基本就是大弧度和顺时针，最后两个值表示终点坐标。（起点坐标是A命令前的M命令来写明）

肯定了弧线的基本实现以后，就是确认数据的问题了：半径和起点、终点坐标，这里要用到一点点数学几何知识。

半径是明确的，起点和终点坐标就要一轮计算了。
原本想在线上画的，发现不知道有啥工具好画，算了，看我手工版灵魂画图：

以左上角为坐标原点，其实就不难基于弧度和半径计算起点和终点的坐标了。

一些细节点：

弧线头不是长方边，能够用stroke-linecap="round"

代码都放codepen上了，能够直接查看实现。

https://codepen.io/shellphon-...