Css 使用不连续部分设置SVG路径动画

在左边的示例中，路径是连续的（即，没有

m

命令），因此路径的段是一个接一个地绘制的

在右边的示例中，路径是不连续的（即包含

m

命令），这会导致一次绘制所有线段

如何使正确示例中的线段一个接一个地绘制

也就是说，第二个冲程仅在最上面的冲程完成时开始，而不是两个冲程同时开始

路径{笔划dasharray:500；笔划dashoffset:500；填充：无；笔划：#000；笔划宽度：6px；动画：绘制5s线性无限；}
@关键帧绘制{to{stroke dashoffset:0；}}

以下是一种使用多个路径元素并使用动画延迟使线依次绘制的方法：

路径{
行程数组：10；
行程偏移：10；
填充：无；
行程：#000；
}
路径：第n个子（1）{动画：draw1 4s线性无限}
路径：第n个子（2）{动画：draw2 4s线性无限}
路径：第n个子（3）{动画：draw3 4s线性无限}
路径：第n个子（4）{动画：draw4 4s线性无限}
@关键帧draw1{
20%，100%{stroke dashoffset:0；}
}
@关键帧draw2{
20%{偏移量：10；}
40%，100%{stroke dashoffset:0；}
}
@关键帧draw3{
40%{stroke dashoffset:10；}
60%，100%{stroke dashoffset:0；}
}
@关键帧draw4{
60%{stroke dashoffset:10；}
80%，100%{stroke dashoffset:0；}
}

我认为这是不可能的，但您可以定义4条路径，并在每个路径之间设置动画。第一轮看起来不错，但在重复时，除了重复的笔划外，它不会清除所有笔划。我希望它能像第一次一样从头开始。如果我删除

infinite

，它会动画一次，但随后会清空，而不是保留结束状态。@user66554我重构了动画。我希望它现在能满足你的需要。不太合适，但它帮了很多忙。我在你的答案中加上了我的答案。