如何在html SVG

Question

如何使用SVG实现这样的目标？

Answer 1

您需要两个不同的circle元素，一个用于底层灰色，另一个用于蓝色笔划，然后将stroke-dasharray和stroke-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>