Javascript 用svg绘制圆形路径及其起点/终点控制

可以画一条这样的圆形路径吗

通过svg路径，可以将其操纵为100%（即整圈）或停止在50%，即从上到下形成半圈。注：100%和50%是使用的示例，在现实世界中，从0到100的任何百分比都应有效

---

经过一些研究，我发现下面的方法似乎就是你画一个圆的方式，但我看不到任何方法来实现这一点，我可以以给定的百分比绘制/停止路径。

我认为你在错误的方向上处理这个问题

你应该在互联网上搜索一个圆形的进度条，你会找到大量的答案

---

这是一个链接：

在堆栈溢出和web上的其他地方，有许多这样做的示例。但他们都将使用两种方法中的一种来绘制进度条：

使用一个或多个路径弧（“a”）命令构造

元素

使用

和破折号图案绘制圆的一部分

第二个更容易实现。希望下面的例子很简单：

函数设置进度（百分比）
{
//指向元素的指针
var progress=document.getElementById（“progress”）；
//求出圆的周长
变量周长=progress.r.baseVal.value*2*Math.PI；
//我们的划水短跑要多长时间才能覆盖周长的一半？
var dashLength=百分比*周长/100；
//设置cicle的“stroke dasharray”属性
progress.style.strokeDasharray=dashLength+“”+周长；
}
统计进展（55）
svg{
宽度：300px
}
#进展{
填充物：浅灰色；
笔画：橙色；
笔画宽度：10；
}
事实上，我以前偶然发现了这一点，并在基于web的项目中使用了它，我之所以要问如何使用纯svg（可能是一些js）实现这一点，是因为我可以用于我的react原生项目。这个库是用与svg本身相同的api构建的，因此我的问题是