需求
主要知識點
參考：developer.mozilla.org/zh-CN/docs/…
1.<path>元素是SVG基本形狀中最強大的一個，它不僅能建立其他基本形狀，還能建立更多其他形狀
2.<path> 屬性d一個點集數列以及其它關於如何繪製路徑的資訊（其值為path命令資訊）
2.path命令 M（Move to它需要兩個引數，分別是需要移動到的點的x軸和y軸的座標）、m(也是Move to它需要兩個引數，分別是相對於當前位置需要在X軸上移動距離、相對於當前位置需要在Y軸上移動的距離)，path的小寫英文字母命令中的位置都代表相對位置。
3.path命令 A（弧線命令，弧形可以視為圓形或橢圓形的一部分)，
A(rx ry , x-axis-rotation， large-arc-flag， sweep-flag ，x y)
rx：x軸半徑
ry：y軸半徑
x-axis-rotation：x軸旋轉的角度（順時針為正）
large-arc-flag：弧線大於還是小於180度， 0表示小角弧度，1 表示大角弧度
sweep-flag：弧線的方向，0表示從起點到終點沿逆時針畫弧，1表示從起點到終點沿順時針畫弧
x：弧度的x終點
Y：弧度的y終點
(⊙_⊙)?為什麼需要這麼多引數來畫弧線呢 可以參考：
developer.mozilla.org/zh-CN/docs/…
4.stroke-dasharray：可控制用來描邊的點劃線的圖案正規化 （用來畫虛線）
5.stroke-dashoffset：屬性指定了dash模式到路徑開始的距離
（其中主要利用4、5知識點來顯示圓環上的彩色進度 ^_^）
6viewBox屬性的值是一個包含4個引數的列表 min-x, min-y, width and height， 以空格或者逗號分隔開， 在使用者空間中指定一個矩形區域對映到給定的元素；例：
viewBox="0 0 100 100"複製程式碼相當於，假設在100*100的範圍內繪製圖案，所有的大小都是相對於 100*100來說的，如果此時svg實際的大小是200*200，則整個圖案中的長度單位其實會是原來的2倍。
主要實現步驟
1.畫一個盛滿整個容器的圓環
<div class="wrap" >
<svg viewBox="0 0 100 100">
<path
stroke-width="10"
fill="none"
stroke="blue"
d="
M 5 50
A 45 45, 0, 0, 1, 95 50
A 45 45, 0, 0, 1, 5 50
"
/>
</svg>
</div>複製程式碼 <style>
.wrap{
width:300px;
height:300px;
border:1px solid pink;
}
</style>複製程式碼svg的實際大小由svg標籤或者外部容器的大小決定；用很粗的線畫圓就變成了圓環啦~由於線寬(strokeWidth) 也是佔用了位置的，所以如果要畫一個最大的圓，半徑 radius = (width-strokeWidth)/2 得到 45，這裡的radius指的是圓心到線寬中間的距離
首先將畫筆移動到座標（5，50）M 5 50 然後給出一個畫弧線命令
A 45 45, 0, 0, 1, 95 50 // 畫出了一個上半圓複製程式碼然後再給出一個畫弧線命令
A 45 45, 0, 0, 1, 5 50 // 下半圓好了，圓了複製程式碼
2.在原有的圓環上顯示進度環
實現思路增加一個 <path>，覆蓋在原來的圓環上，然後通過stroke-dasharray和stroke-dashoffset來實現進度條的效果。
<div class="wrap" >
<svg viewBox="0 0 100 100">
<path
stroke-width="10"
fill="none"
stroke="blue"
d="
M 5 50
A 45 45, 0, 0, 1, 95 50
A 45 45, 0, 0, 1, 5 50
"
/>
<path
stroke-width="10"
fill="none"
stroke="red"
d="
M 5 50
A 45 45, 0, 0, 1, 95 50
A 45 45, 0, 0, 1, 5 50
"
/>
</svg>
</div>複製程式碼這個時候是這樣的： 藍圈圈被紅圈圈壓在下面啦！
好！怎麼讓紅圈圈只顯示一部分呢？？接下來我要簡單介紹一下stroke-dasharray和stroke-dasharray
我們先來試試用stroke-dasharray畫一條虛線從座標（0，20）到（100，20）
<path stroke-dasharray="5,3" d="M0 20 L100 20" stroke="red"/>複製程式碼
接下來我們來看看stroke-dashoffset的作用, 虛線偏移
<path
stroke-dashoffset="2"
stroke-dasharray="5,3"
d="M0 20 L100 20" stroke="red"
/>複製程式碼整根虛線被活生生的像起點方向拖動了 2個單位！
那麼我們是不是可以把畫一個一圈紅一圈透明的圈圈纏繞起來的東西，然後朝起點方向偏移呢
先來算一下週長 Math.PI * 2 * radius
stroke-dasharray="Math.PI * 2 * 45"如果要讓進度條佔整個圓環的80%，那麼就要向起點位置拖動周長的 20%
stroke-dashoffset="Math.PI * 2 * 45*.2" <div class="wrap" >
<svg viewBox="0 0 100 100">
<path
stroke-width="10"
fill="none"
stroke="blue"
d="
M 5 50
A 45 45, 0, 0, 1, 95 50
A 45 45, 0, 0, 1, 5 50
"
/>
<path
stroke-width="10"
fill="none"
stroke="red"
d="
M 5 50
A 45 45, 0, 0, 1, 95 50
A 45 45, 0, 0, 1, 5 50
"
stroke-dasharray ="282"
stroke-dashoffset="56.4"
/>
</svg>
</div>複製程式碼如果想要圓角效果 stroke-linecap="round"
基本上效果已經達到了，如果想要有動的效果的話可以通過transition 新增動畫。
半圓的進度條實現原理是一樣的只畫半個圓就可以啦~~，可以封裝成靈活的元件來使用，這裡只記錄主要的實現步驟。
前端菜鳥第一次寫文章，旨在分享記錄學習的過程，如果有哪裡寫的不夠好歡迎指正，(*╹▽╹*)
