如何在 svg 中保存开始时间来重新启动动画

Question

我试图实现这样一种情况：三行一一填满，并在等待重新启动时冻结，第一行从 0s 开始，第二行从 3s 开始，最后一行从 6s 开始，整个过程需要 9 秒然后重新启动

<svg viewBox="0 0 74 2" height="2" width="74">
<line x1="0" y1="0" x2="20" y2="0" style="stroke:black;stroke-width:3" />
<line x1="27" y1="0" x2="47" y2="0" style="stroke:black;stroke-width:3" />
<line x1="54" y1="0" x2="74" y2="0" style="stroke:black;stroke-width:3" />
<line class="line" x1="0" y1="0" x2="0" y2="0" 
style="stroke:red;stroke-width:4" >
<animate 
id="first"
dur="3s"
attributeName="x2"
from="0"
begin="0s"
to="20"
dur="3s"
fill='freeze'
/>
</line>
<line x1="27" y1="0" x2="27" y2="0" 
style="stroke:red;stroke-width:4" >
<animate 
id="second"
dur="3s"
begin="3s"
attributeName="x2"
from="27"
to="47"
dur="3s"
fill='freeze'
repeatCount="1"
/>
</line>
<line x1="54" y1="0" x2="54" y2="0" 
style="stroke:red;stroke-width:4" >
<animate 
id="third"
dur="3s"
begin="6s"
attributeName="x2"
from="54"
to="74"
dur="3s"
repeatCount="1"
fill='freeze'
/>
</line>
Sorry, your browser does not support inline SVG.
</svg>

我的问题是如何同时重新启动三个动画标签，同时保存它们的开始时间。

附言我想将其嵌入到反应组件中

Answer 1

最简单的方法是使所有动画的长度相同，以便它们同时重新启动。然后调整每个动画中的更改，以便它们在正确的时间发生。

为此，我将动画从/转换为值，以便我可以每隔 3 秒指定一个值。

<svg viewBox="0 0 74 2" height="2" width="74">
<line x1="0" y1="0" x2="20" y2="0" style="stroke:black;stroke-width:3" />
<line x1="27" y1="0" x2="47" y2="0" style="stroke:black;stroke-width:3" />
<line x1="54" y1="0" x2="74" y2="0" style="stroke:black;stroke-width:3" />
<line class="line" x1="0" y1="0" x2="0" y2="0" 
style="stroke:red;stroke-width:4" >
<animate 
id="first"
dur="9s"
attributeName="x2"
begin="0s"
values="0;20;20;20"
from="0"
to="20"
repeatCount="indefinite"
/>
</line>
<line x1="27" y1="0" x2="27" y2="0" 
style="stroke:red;stroke-width:4" >
<animate 
id="second"
dur="9s"
begin="0s"
attributeName="x2"
values="27;27;47;47"
fill='freeze'
repeatCount="indefinite"
/>
</line>
<line x1="54" y1="0" x2="54" y2="0" 
style="stroke:red;stroke-width:4" >
<animate 
id="third"
dur="9s"
begin="0s"
attributeName="x2"
values="54;54;54;74"
repeatCount="indefinite"
/>
</line>
Sorry, your browser does not support inline SVG.
</svg>