我在带有dur =“ 10s”的SVG动画上使用elt.beginElementAt(-5),正常情况下它的工作时间是5s。
但是如果在动画结束时(即在启动elt.beginElementAt(-5) cmd后5秒钟)我想再次触发它,则不起作用!

我必须等待“真实”持续时间(在本示例中为10s),才能重新启动动画。如果在我的第一个elt.beginElementAt(-5)命令之后尝试在5s到10s之间尝试什么都不会发生...

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

谢谢。

最佳答案

要使SVG启动和重置功能协同工作,请设置fill属性。

<!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>

关于javascript - 使用beginElementAt()时如何重置SVG动画的计时器?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24494010/

10-12 00:20
查看更多