html - 如何将不同的颜色应用于 SVG 圆中的 stroke-dashoffset？

Question

我正在使用 Material Spinner 来显示进度状态。我希望未填充区域为灰色。

<svg style="width: 100px; height: 100px;">
  <circle cx="50%" cy="50%" r="45" style="animation-name: 
     mat-progress-spinner-stroke-rotate-100; stroke-dashoffset: 197.92px; stroke-dasharray: 282.743px; stroke-width: 10%;">
  </circle>
</svg>

Answer 1

先画一个完整的灰色圆圈，不用stroke-dasharray。然后画出你不完整的圆圈(最后画的总是在最上面)。

<svg style="width: 100px; height: 100px;">
<circle cx="50%" cy="50%" r="45" fill="none" stroke="grey" stroke-width="10%";>
  </circle>
  <circle cx="50%" cy="50%" r="45" fill="none" stroke="orange" style="animation-name: 
     mat-progress-spinner-stroke-rotate-100; stroke-dashoffset: 197.92px; stroke-dasharray: 282.743px; stroke-width: 10%;">
  </circle>
</svg>