如何在SVG圈中对stroke-dashoffset应用不同的颜色？

Question

我正在使用材质微调器来显示进度状态。我希望未填充的区域是灰色的。

<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>

Answer 2

尝试将以下样式应用于 svg 标签：

svg {
  background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 56%,#bbbbbb 59%,#bbbbbb 100%);
  border-radius: 50%,
}