如何用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点开始。