如何用CSS或SVG製作不同圓弧的圓？

Question

就像這樣：

它有不同的寬度。

Answer 1

在SVG中如何做到這一點是將一個圓直接放在另一個圓上面。

<svg width="200" height="200"> 
 
    <circle cx="100" cy="100" r="70" fill="none" stroke="#ccc" stroke-width="1"/> 
 
    <circle cx="100" cy="100" r="70" fill="none" stroke="#ccc" stroke-width="5" 
 
      stroke-dasharray="413.4 440" transform="rotate(-90 100 100)"/> 
 
    
 
</svg>

在第二（前部）的圓的兩個附加屬性執行以下功能：

stroke-dasharray="413.4 440"使得與繪製圓周的94％的效果的虛線圖案（ 2 * PI * 70 = 440）。

transform="rotate(-90 100 100)"逆時針旋轉90度，使「進度條」從12點開始。默認情況下，圓圈的虛線圖案從3點開始。