Javascript 如何实现svg线条的渐进式动画

我试图实现svg行路径的渐进动画。我使用的路径类似于M L M L。。若要解决此问题，动画将无法完美工作

这是我的密码

var distancePerPoint=1；
var drawFPS=100；
var orig=document.querySelector（'path'），长度，计时器；
var a=document.querySelector（'svg'）；
a、 addEventListener（'mouseover'，startDrawingPath，false）；
a、 addEventListener（'mouseout'，stopDrawingPath，false）；
函数startDrawingPath（）{
长度=0；
orig.style.stroke='绿色'；
计时器=设置间隔（增加长度，600/每分钟）；
}
函数递增长度（a）{
var pathLength=orig.getTotalLength（）；
长度+=每点距离；
原始设置属性（“笔划数组”，长度+'，2000'）；
如果（长度>=路径长度）clearInterval（计时器）；
}
函数stopDrawingPath（）{
清除间隔（计时器）；
原始样式笔划=“”；
}

您的意思是希望子路径一个接一个地设置动画，而不是同时设置所有子路径的动画

答案是你不能。破折号模式在每个子路径（每个移动“M”）的开始处开始/重置。除此之外，没有其他解决办法：

通过删除不必要的“M”命令修复路径，或

将行拆分为单独的路径，然后逐个触发它们

---

您正在尝试使用“stroke dasharray”属性设置线的动画。但这分别适用于每一行基本体，而不是整个路径。正如你在结果中看到的那样。路径中的每个M组件将重置svg路径渲染器中的内部笔划长度值

---

更直接的解决方案是为路径数据本身设置动画。或者只需在动画帧中添加路径元素。

您的意思是希望子路径一个接一个地设置动画，而不是同时设置所有子路径？@PaulLeBeau只需替换此路径，您就可以看到不同的路径“M 0 239.34 L 105.75 299.25 L 105.75 299.25 L 211.5 279.28 L 211.5 279.28 L 317.25 259.31 L 317.25 259.31 L 423 259.46 L 423 259.46 L 528.75 99.55 L 528.75 99.55 L 634.5 199.40000000000003”这是我需要的，但使用了这条路径