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

Question

在左边的例子中，路径是连续的（即没有m命令），因此路径的段被一个接一个地绘制。

在右侧示例中，路径是不连续的（即包含m命令），这会导致一次绘制所有段。

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

也就是说，只有在最上面的笔画完成时才开始第二笔画，而不是同时开始。

<svg width="220px" height="100px" viewBox="-10 -10 240 120">
<style>
path{stroke-dasharray:500;stroke-dashoffset:500;fill:none;stroke:#000;stroke-width:6px;animation:draw 5s linear infinite;}
@keyframes draw{to{stroke-dashoffset:0;}}
</style>
  <path d="m0,0 h60 v60 h-60 z" />
  <path d="m120,0 h60 m-60,20 h60 m-60,20 h60 m-60,20 h60 m-60,20" />
</svg>

Answer 1

这是一种使用多个路径元素并使用动画延迟使线条一个接一个绘制的方法：

path{
  stroke-dasharray:10;
  stroke-dashoffset:10;
  fill:none;
  stroke:#000;
}
path:nth-child(1){animation:draw1 4s linear infinite}
path:nth-child(2){animation:draw2 4s linear infinite}
path:nth-child(3){animation:draw3 4s linear infinite}
path:nth-child(4){animation:draw4 4s linear infinite}
@keyframes draw1{
  20%,100%   {stroke-dashoffset:0; }
}
@keyframes draw2{
  20%    {stroke-dashoffset:10;}
  40%,100%   {stroke-dashoffset:0; }
}
@keyframes draw3{
  40%    {stroke-dashoffset:10;}
  60%,100%   {stroke-dashoffset:0; }
}
@keyframes draw4{
  60%    {stroke-dashoffset:10;}
  80%,100%   {stroke-dashoffset:0; }
}

<svg width="220px" height="100px" viewBox="0 0 10 11">
  <path d="M0,1  h10" />
  <path d="M0,4  h10" />
  <path d="M0,7  h10" />
  <path d="M0,10 h10" />  
</svg>