javascript - 动画圆描边 SVG - 不是一个完整的圆

Question

大家好，我在为 SVG 上的笔画设置动画时遇到了问题，我只希望它是一个 3/4 的圆，因为数学更复杂!

基本上我想在函数中传递一个百分比 (0-100) 并让线条动画到正确的位置。因此，33% 会以绿色显示四分之一的行程，100% 会以绿色显示 3/4 的行程。

我这里有一支笔，您可以更改 JS 动画中的偏移量以获得不同的结果。

$(".percentage").animate({"stroke-dashoffset":"78"}, 3000);

所以“78”将是 100%，“314”将是 0%，但我不知道如何映射它!

CodePen Demo

感谢任何帮助!

Answer 1

var length= 314-78;
fuction toPercentage (number){
   return Math.round(((314-number)/length)*100);
}