svg - 如何在html SVG中笔划的不同部分设置不同的颜色

Question

如何使用 SVG 实现类似的效果？

Answer 1

您需要两个不同的circle元素，一个用于底层灰色，另一个用于蓝色描边，然后应用描边-dasharray和描边-dashoffset 到蓝色描边。

 .track,
.filled {
  stroke-width: 10;
  fill: none;
}

.track {
  stroke: #eee;
}

.filled {
  stroke: blue;
  stroke-dashoffset: 110;
  stroke-dasharray: 440;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 190">
  <circle class="track" cx="80" cy="80" r="70" />
  <circle class="filled" cx="80" cy="80" r="70" />
</svg>