svg 進度條

先看理想效果

先上代碼，在進行解釋

<div id="app">
        <svg width="230" height="230" viewBox="0 0 230 230" transform="rotate(90),scale(-1,1)">
            //進度條漸變色
            <defs>
                <linearGradient id="orange" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%"   stop-color="#F34D4D"/>
                    <stop offset="100%" stop-color="#F27D31"/>
                </linearGradient>
            </defs>
　　　　　　　　//進度條漸變
　　　　　　　　//外層圓
　　　　　　　　<circle cx="115" cy="115" r="87" fill="none" stroke="#f7f7f7" stroke-width="30" />
　　　　　　　　//外層圓
　　　　　　　　//內容圓
　　　　　　    <circle cx="115" cy="115" r="87" fill="none" stroke="url(#orange)" stroke-width="12" stroke-dasharray="50,547" :stroke-dashoffset="dashOffsetCircle" stroke-linecap="round" /> 
　　　　　　　　//內層圓　　　　　　
　　　　</svg> 
</div>
svg: witdh:230單位，
　　　height: 230單位,注意不是px 是單位
　　　viewBox="x軸擺放的位置 y軸擺放的位置 在視圖內顯示的x大小 在視圖內顯示y的大小", svg 可以理解為相框，viewBox 相當於設定內容的擺放位置與縮放
　　  transform 與 css 理解一致

defs: 設定填充顏色
circle: 為設置圓標簽
　　  cx: 圓心在x軸的位置
　　  cy: 圓心在y軸的位置
　　  fill: 設置繪制圖案的填充顏色或圖案
　　  stroke: 定制繪制線的顏色
　　  stroke-width: 繪制線的寬度
　　  stroke-dasharray: 設置實線和虛線的寬度
　　　stroke-dashoffset: 實線虛線繪制的起點距路徑開始的距離

stroke="url(#orange)" 引用defs 上的漸變色