javascript - 如何将 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

我正在添加一个元素 <set>在 rect 内，我在函数内启动 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>