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

Question

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

通过svg路径以某种方式可以将其操纵为100％（这样一个完整的圆圈）或停在50％的位置，因此从上到下形成一个半圆。 注意100％和50％是示例，在现实世界中，从0到100的任何百分比都是有效的。

经过研究后，我发现以下方法似乎是您绘制圆圈的方式https://stackoverflow.com/a/8193760/911930，但我看不到有什么方法可以在给定位置绘制/停止路径百分比。

Answer 1

在Stack Overflow和网络上的其他地方，有许多有关如何执行此操作的示例。 但是他们都将使用以下两种方法之一来绘制进度条：

1. 使用一个或多个路径弧（'A'）命令构造一个<path>元素
2. 使用<circle>并使用破折号图案绘制圆的一部分

第二个是两者中较容易实现的。 希望以下示例可以直接执行：

 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); 

 svg { width: 300px } #progress { fill: lightgrey; stroke: orange; stroke-width: 10; } 

 <svg viewBox="-100 -100 200 200"> <circle id="progress" r="80" transform="rotate(-90)"/> </svg> 

Answer 2

我认为您正在以错误的方向解决此问题；

您应该在互联网上搜索圆形进度栏，您会找到大量答案。

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