Animating SVG paths with discontinuous parts

2020-07-20 05:12发布

问题:

In the left example the path is continuous (i.e. no m commands), hence the segments of the path are drawn one after another.

In the right example the path is discontinuous (i.e. containing m commands), which causes all segments to be drawn at once.

How can I make the segments in the right example be drawn one after another?

That is, the second stroke starting only when the topmost stroke is finished instead of both starting simultaneously.

<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>

回答1:

Here is an approach using several path elements and using animation-delay to make the lines draw one after the other :

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>