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