动画化具有不连续零件的SVG路径 [英] Animating SVG paths with discontinuous parts

问题描述

在左边的示例中，路径是连续的(即没有m命令)，因此路径的各个部分是一个接一个地绘制的.

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

在右边的示例中，路径是不连续的(即包含m命令)，这会导致一次绘制所有线段.

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>

推荐答案

这是一种使用多个路径元素并使用animation-delay来使线条一个接一个地绘制的方法:

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>

这篇关于动画化具有不连续零件的SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！