使用html5 svg创建循环进度条

Question

我用画布制作了这个圆形图。 绿色进度从顺时针120度开始，顺时针以60度结束。在画布中，您可以使用

执行此操作

context.arc(centerx, centery,radius, startangle, endangle, anticlockwise);

但我发现SVG太难了。任何人都可以告诉我如何从svg做到这一点。 我之所以喜欢从SVG这样做是因为当动画进度时，画面的质量会在屏幕缩放时降低。顺便说一句，如果你需要一个代码，我可以给你。它具有高度可配置性：

Answer 1

canvas的arc命令非常简单。但是在SVG中你必须使用路径来绘制循环进度，它有点复杂。 取得进步的代码是

<path d="M startx starty A radiusx radiusy x-axis-rotation large-arc-flag sweep-flag endx endy " />

绘制进度背后的想法是，您必须绘制一条从圆周开始的路径，该路径从指定角度开始并以指定角度结束。有一个数学公式可以在圆周上找到可用于在svg中创建路径的点

x = centerx + radius * Math.cos(anglein radians);
y = centery + radius * Math.cos(anglein radians);

为简化起见，我找到了一个计算路径的函数。你只需写下这个：

progress(200, 200, 120, -150, 150);

进度函数采用以下参数：

progress(centerx,centery,startangle,endangle);

这将取得全面进展。如果你想改变进度改变结束角度，即减小它。这只是绘制圆形路径背后的想法。

Here is the JSFiddle link