Javascript 使用SVG和JS创建30秒计时器显示

我正在尝试使用SVG和一点JS创建一个30秒倒计时显示。这个想法很简单

将倒计时时钟的正面画成一个SVG圆圈

在其内部，以圆的扇形绘制一条闭合的SVG路径

使用

window.requestAnimationFrame

以1秒的间隔更新该扇区

我的努力如下所示。虽然它奏效了，但最终的结果还远远不够顺利和令人信服

• 当所花费的时间进入圆的第二象限时，扇形部分似乎膨胀超过圆周
• 当它在第三和第四象限时，它似乎与圆周分离

我做错了什么？如何改进

var\u hold={tickStart:0，stopTime:30，lastDelta:0}；
String.prototype.format=函数（args）
{
var newStr=这个，键；
对于（参数中的键）{newStr=newStr.replace（'{'+key+'}'，args[key]）；}
返回新闻TR；
};
Boolean.prototype.intval=函数（位置）
{
地点=（'undefined'==typeof（地点））？0：地点；
return（~~ this）可能的解决方案是使用如下的笔划动画：

蓝色圆圈的半径为
38/2=19

蓝色圆圈的
笔划宽度为38，给人以38个单位圆的错觉

请看一看路径：它也是一个半径为19的圆


svg{
边框：1px实心；
高度：90vh；
}
#钟面{
填充物：银；
}
#花费{
填充：无；
行程：#6683c2；
笔划宽度：38px；
行程：119.397px；
行程偏移量：119.397px；
动画：直线无限；
}
@关键帧破折号{
到{
笔划偏移：0；
}
}

您的arc命令的半径为37，而您计算的端点的半径为38。这一点得到满分。谢谢！谢谢您-我总是喜欢不需要脚本的解决方案。动画更平滑，但这可能是因为我的1s动画间隔太大。