使用不连续部分动画 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>

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

Animating SVG paths with discontinuous parts

css

svg

keyframe

css-animations