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 开始，如何将所有内容重置为其初始状态并重播整个动画？

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

Answer 1

我在矩形内添加了一个元素 <set> 并且我在函数 function startAnimation() 内启动了 set 元素

<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 动画重置为其初始状态？

2 个答案: