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

Posted 2023-03-06

【中文标题】使用不连续部分为 SVG 路径设置动画

【英文标题】：Animating SVG paths with discontinuous parts

【发布时间】：2017-02-15 05:26:40

【问题描述】：

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

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

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

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

<svg   viewBox="-10 -10 240 120">
<style>
pathstroke-dasharray:500;stroke-dashoffset:500;fill:none;stroke:#000;stroke-width:6px;animation:draw 5s linear infinite;
@keyframes drawtostroke-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>

【问题讨论】：

我不认为这是可能的，但您可以定义 4 条路径，并在它们之间有一点延迟。

【参考方案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   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>

【讨论】：

第一轮看起来不错，但在重复时并不能清除所有内容，而只会清除重复的笔划。我希望它像第一次一样重新开始。如果我删除 infinite 它会动画一次，但随后会空白而不是保持结束状态。

@user66554 我重构了动画。我希望它现在能满足您的需求。

不完全，但它帮助很大。我将我的解决方案添加到您的答案中。