用svg绘制圆形路径并控制其开始/结束

Question

是否可以绘制像这样的圆形路径

通过svg路径，可以将其操纵为100％（如此全圆）或停止在50％，从而从上到下形成半个圆圈。注意100％和50％是使用的示例，在现实世界中，0到100之间的任何百分比都应该有效。

经过一些研究后，我发现以下方法似乎就是你如何绘制一个圆圈https://stackoverflow.com/a/8193760/911930，但我没有看到任何方法来实现这个，我可以在给定的百分比下绘制/停止路径。

Answer 1

有很多关于如何执行此操作的示例，请参阅Stack Overflow和Web上的其他内容。但他们都会使用两种方法之一来绘制进度条：

1. 使用一个或多个路径弧（＆＃39; A＆＃39;）命令构建<path>元素
2. 使用<circle>并使用短划线图案绘制圆圈的一部分

第二个是两个人更容易实现。希望下面的示例很容易理解：

＆＃13;
＆＃13;
function setProgress(percent)
{
  // Pointer to the <circle> element
  var progress = document.getElementById("progress");
  // Get the length of the circumference of the circle
  var circumference = progress.r.baseVal.value * 2 * Math.PI;
  // How long our stroke dash has to be to cover <percent> of the circumference?
  var dashLength = percent * circumference / 100;
  // Set the "stroke-dasharray" property of the cicle
  progress.style.strokeDasharray = dashLength + ' ' + circumference;
}

setProgress(55);
＆＃13;
svg {
  width: 300px
}

#progress {
  fill: lightgrey;
  stroke: orange;
  stroke-width: 10;
}
＆＃13;
<svg viewBox="-100 -100 200 200">
  <circle id="progress" r="80" transform="rotate(-90)"/>
</svg>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我认为你正朝着错误的方向解决这个问题;

你应该在互联网上搜索循环进度条，你会发现很多答案。

这是一个链接：https://kimmobrunfeldt.github.io/progressbar.js/