使用 beginElementAt() 时如何重置 SVG 动画的计时器？答案

【问题标题】：How to reset the timer of SVG animation when using beginElementAt()?使用 beginElementAt() 时如何重置 SVG 动画的计时器？
【发布时间】：2018-09-18 15:16:28
【问题描述】：

我在带有 dur="10s" 的 SVG 动画上使用 elt.beginElementAt(-5)，它在 5s 内工作，正常。但是如果在动画结束时（即在启动 elt.beginElementAt(-5) cmd 后 5 秒）我想再次触发它，它不起作用！

我必须等待“真实”持续时间（本例中为 10 秒）才能重新启动动画。如果我在第一个 elt.beginElementAt(-5) 命令之后尝试 5 秒到 10 秒之间没有任何反应...

那么，如何重置计时器？如何忽略“正常”持续时间？

谢谢。

【问题讨论】：

你能制作一个 jsfiddle 吗？
of curse：jsfiddle.net/Ay88G/8 如你所见，我不能在一个动画到红色路径的时候用绿色路径做 2 个动画。我必须等待完整的 SVG 持续时间才能重新启动 beginElementAt()...

标签： javascript animation svg

【解决方案1】：

要让 SVG 启动和重置功能协同工作，请设置填充属性。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta charset="utf-8" />
  <title>Scalable Vector Graphics (SVG) - SVG Animations</title>

  <!-- Scaffold -->
  <style>
    /* <![CDATA[ */
    body {
      margin-left: 100px;
    }

    svg {
      border: 1px solid black;
      width: 600px;
      height: 400px;
    }

    svg * {
      fill: none;
      stroke: #000000;
      stroke-width: 1px;
    }
    /* ]]> */
  </style>


  <script>
    /* <![CDATA[ */
    function go() {
      var elements = document.getElementsByTagName("animate");
      for (var i = 0; i < elements.length; i++) {
        elements[i].setAttribute("fill", "freeze");
        elements[i].beginElement();
      }
    }

    function reset() {
      var elements = document.getElementsByTagName("animate");
      for (var i = 0; i < elements.length; i++) {
        elements[i].setAttribute("fill", "remove");
        elements[i].endElement();
      }
    }

    /* ]]> */
  </script>
</head>
<body>
  <h1>Scalable Vector Graphics (SVG) - SVG Animations</h1>

  <svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">
    <rect x="10" y="10" width="100" height="100">
      <!-- begin="indefinite" allows us to start the animation from script -->
      <animate attributeName="x" begin="indefinite" dur="1s" from="10" to="300" fill="freeze" />
    </rect>

  </svg>

  <button onclick="go();" type="button">Go</button>
  <button onclick="reset();" type="reset">Reset</button>

</body>
</html>

【讨论】：