Question

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

我必须等待＆＃34;真相＆＃34;持续时间（在此示例中为10秒），以便能够重新启动动画。如果我在第一个elt.beginElementAt(-5)命令后尝试5到10秒之间没有任何反应......

那么，如何重置计时器？如何忽略＆＃34;正常＆＃34;持续时间？

感谢。

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

使用beginElementAt（）时如何重置SVG动画的计时器？

1 个答案: