有几种不同的方法可以做到这一点，但对于您的SVG，它可能会使用linear gradient（虽然这不是一个完美的解决方案，因为它只是从左到右的线性梯度，并不遵循拱门），但我认为这已经足够了。

.progress-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

.grey {
  stroke: #e5e5e5;
  stroke-width: 3px;
}

.green {
  stroke: url(#arcGradient);
  stroke-width: 9px;
  stroke-dasharray: 248;
  stroke-dashoffset: 240;
  /* adjust last number for variance */
  &.red-09 {
    stroke-dashoffset: 50;
  }
}

<div class="progress-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <defs>
          <linearGradient id="arcGradient" gradientUnits="objectBoundingBox">
            <stop offset="0%" stop-color="red"/>
            <stop offset="20%" stop-color="darkorange"/>
            <stop offset="50%" stop-color="khaki"/>
            <stop offset="80%" stop-color="yellowgreen"/>
            <stop offset="100%" stop-color="limegreen"/>
          </linearGradient>
      </defs>
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="green red-09" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
</div>

我不知道你想如何控制stroke-dashoffset的长度。但是，也许这将是明智的添加作为一种风格，所以你不需要为每个长度的进度条很多不同的类。

.progress-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

.grey {
  stroke: #e5e5e5;
  stroke-width: 3px;
}

.green {
  stroke: url(#arcGradient);
  stroke-width: 9px;
  stroke-dasharray: 248;
  stroke-dashoffset: 240;
}

<div class="progress-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <defs>
          <linearGradient id="arcGradient" gradientUnits="objectBoundingBox">
            <stop offset="0%" stop-color="red"/>
            <stop offset="20%" stop-color="darkorange"/>
            <stop offset="50%" stop-color="khaki"/>
            <stop offset="80%" stop-color="yellowgreen"/>
            <stop offset="100%" stop-color="limegreen"/>
          </linearGradient>
      </defs>
      <path class="grey" d="M55,90 A55,55 0 1,1 140,90" style="fill:none;"></path>
      <path class="green" d="M55,90 A55,55 0 1,1 140,90" style="fill:none; stroke-dashoffset: 50;"></path>
  </svg>
</div>

这样，它也更容易更新，例如JS，如果这应该反映用户正在做的事情，客户端。希望这能帮到你。祝你今天愉快！