javascript通过svg动画循环

我在循环SVG动画方面遇到了一些问题

我知道了如何设置路径动画，但问题是我希望它们在绘制时消失，并在短时间延迟后显示两个不同的路径。我需要这两个操作也被循环

www.jsfiddle.net/8zneofyw/

---

谢谢

Challange接受了

我就是这样解决的：

• 动画运行10秒
• 每个路径都有一行和一个同样长的空格

  stroke-dasharray:160160

因此，这将创建一条绘制的空线

但是，所有四条路径都是同时创建的，我们想画两条和两条线。 因此，前两条路径和后两条路径之间需要5秒的延迟：

• 在路径后添加空白以填充一半动画：

  stroke dasharray:160、160、0320

• 现在我们只需要在正确的时间开始动画：

  stroke dashoffset:160。和
  行程dashoffset:320
  ，用于最后两个

路径{
笔画宽度：2；
}
#一个{
笔划数组：160、160、0320；
行程偏移：160；
动画：魔术10s线性无限；
}
#两个{
笔划数组：160、160、0320；
行程偏移：160；
动画：魔术10s线性无限；
}
#树{
笔划数组：165、165、0330；
行程偏移量：330；
动画：moremagic 10s线性无限；
}
#四{
笔划数组：165、165、0330；
行程偏移量：330；
动画：moremagic 10s线性无限；
}
@关键帧魔术{
0% {
行程偏移：160；
}
50% {
笔划偏移：0；
}
50.01% {
行程偏移：-160；
}
100% {
行程偏移：-160；
}
}
@关键帧更神奇{
到{
笔划偏移：0；
}
}

---

接受查兰热

我就是这样解决的：

• 动画运行10秒
• 每个路径都有一行和一个同样长的空格

  stroke-dasharray:160160

因此，这将创建一条绘制的空线

但是，所有四条路径都是同时创建的，我们想画两条和两条线。 因此，前两条路径和后两条路径之间需要5秒的延迟：

• 在路径后添加空白以填充一半动画：

  stroke dasharray:160、160、0320

• 现在我们只需要在正确的时间开始动画：

  stroke dashoffset:160。和
  行程dashoffset:320
  ，用于最后两个

路径{
笔画宽度：2；
}
#一个{
笔划数组：160、160、0320；
行程偏移：160；
动画：魔术10s线性无限；
}
#两个{
笔划数组：160、160、0320；
行程偏移：160；
动画：魔术10s线性无限；
}
#树{
笔划数组：165、165、0330；
行程偏移量：330；
动画：moremagic 10s线性无限；
}
#四{
笔划数组：165、165、0330；
行程偏移量：330；
动画：moremagic 10s线性无限；
}
@关键帧魔术{
0% {
行程偏移：160；
}
50% {
笔划偏移：0；
}
50.01% {
行程偏移：-160；
}
100% {
行程偏移：-160；
}
}
@关键帧更神奇{
到{
笔划偏移：0；
}
}

我从您的小提琴上看到，您对svg非常了解，但我不知道您希望循环哪些操作，以及在绘制这些操作时需要取消哪些操作。请用更好的解释编辑您的问题。@Persijn过程描述：1步。第二步画两条路。第三步让他们消失。第四步画两个不同的一。第五步，让他们消失。转到第一步我从你的小提琴上看到你对svg非常了解，但我不知道你想要循环什么操作，以及在绘制它们时需要取消什么操作。请用更好的解释编辑您的问题。@Persijn过程描述：1步。第二步画两条路。第三步让他们消失。第四步画两个不同的一。第五步，让他们消失。转到第一步