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

本文介绍了使用beginElementAt（）时如何重设SVG动画的计时器？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在带有dur = 10s的SVG动画上使用 elt.beginElementAt（-5），正常情况下是5s。
但如果在动画结束时（即在启动 elt.beginElementAt（-5） cmd后5秒），我想再次触发它，它不会不行！

I use elt.beginElementAt(-5) on SVG animation with dur="10s", it's worked in 5s, normal.BUT if at the end of an animation (i.e. at 5 seconds after launch elt.beginElementAt(-5) cmd) I want to trigger it again, It doesn't work!

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

I have to wait for the "truth" duration (10s in this example), to be able to restart the animation. Nothing happens if I try between 5s and 10s after my first elt.beginElementAt(-5) command...

那么，如何重置计时器？

So, how to reset the timer? How to ignore the "normal" duration?

谢谢。

推荐答案

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

To have SVG start and reset functions work together, set the fill attribute.

<!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动画的计时器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！