如何将 svg 动画重置为初始状态？

Question

我有一个类似这样的 SVG 动画：

function startAnimation() {
  document.querySelector('#anim-width').beginElement();
}

<svg width="100" viewBox="0 0 100 100">
  <rect id="box" x="10" y="10" fill="red" width="10" height="10">
    <animate
      id="anim-width"
      attributeName="width"
      from="10"
      to="80"
      dur="1s"
      fill="freeze"
      begin="click"
    />
    
    <animate
      attributeName="height"
      from="10"
      to="80"
      begin="anim-width.end + 0s"
      dur="1s"
      fill="freeze"
    />
  </rect>
</svg>

<br/>

<button onclick="startAnimation()">Start</button>

我要实现的是红框从10乘10开始，当点击按钮时，宽度从10扩大到80，宽度动画完成后高度扩大到80。

第一次播放时效果很好，但再次单击按钮时高度从 80 而不是 10 开始，如何将所有内容重置为初始状态并重新播放整个动画？

我尝试在 startAnimation() 函数中添加 document.querySelector('#box').setAttribute('height', '10'); 但它似乎不起作用。

Answer 1

我在 rect 中添加一个元素 <set> 并且在函数中启动 set 元素 function startAnimation()

<set> 元素是设置属性值（在本例中为高度）的方式，就像持续时间为 0 的动画。

function startAnimation() {
  document.querySelector("#set").beginElement();
  document.querySelector("#anim-width").beginElement();
}

<svg width="100" viewBox="0 0 100 100">
  <rect id="box" x="10" y="10" fill="red" width="10" height="10">
    <animate id="anim-width" attributeName="width" from="10" to="80" dur="1s" fill="freeze" begin="click" />

    <animate id="anim-height" attributeName="height" from="10" to="80" begin="anim-width.end + 0s" dur="1s" fill="freeze" />

    <set id="set" attributeName="height" to="10"></set>
  </rect>
</svg>

<br />

<button onclick="startAnimation()">Start</button>

Answer 2

另一种选择是让 <animate> 元素通过重置高度来启动动画。

document.querySelector("#anim-height").addEventListener("endEvent", enableButton);

function startAnimation() {
  document.querySelector("#start-btn").disabled = true;
  document.querySelector("#anim-start").beginElement();
}


function enableButton()
{
  document.querySelector("#start-btn").disabled = false;
}

<svg width="100" viewBox="0 0 100 100">
  <rect id="box" x="10" y="10" fill="red" width="10" height="10">
    <animate id="anim-start" attributeName="height" to="10" dur="0.01s" fill="freeze" begin="indefinite" />
    <animate id="anim-width" attributeName="width" from="10" to="80" dur="1s" fill="freeze" begin="anim-start.end + 0s" />
    <animate id="anim-height" attributeName="height" from="10" to="80" begin="anim-width.end + 0s" dur="1s" fill="freeze" />
  </rect>
</svg>

<br />

<button id="start-btn" onclick="startAnimation()">Start</button>

如何将 svg 动画重置为初始状态？

How to reset an svg animation to its initial state?

html

javascript

svg

svg-animate