这是一种从头开始重新启动 SVG 元素中的 <animate> 的方法吗？

Question

只需要知道我们如何重新启动 <svg> 中的元素序列。谢谢。

<html>

  <head>
  </head>

  <body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
      <circle cx="50" cy="23" r="13" fill="#e15b64">
        <animate attributeName="cy" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9" keyTimes="0;0.5;1" values="23;77;23"></animate>
      </circle>
    </svg>
    <button onclick="RestartAnimate();">Restart Animate</button>
  </body>
  <script>
    function RestartAnimate() {
        // Do something...
    }
  </script>
</html>

Answer 1

<button onclick="RestartAnimate();"> 你必须去掉分号

分配动画标识符<animate id="an"

赋值begin="indefinite"

在下面的示例中，循环在按下按钮后重复三次 Restart Animate

<html>

  <head>
  </head>

  <body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
      <circle cx="50" cy="23" r="13" fill="#e15b64">
        <animate id="an" attributeName="cy" dur="1s" repeatCount="3"  begin="indefinite" calcMode="spline" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9" keyTimes="0;0.5;1" values="23;77;23"></animate>
      </circle>
    </svg>
    <button onclick="RestartAnimate()">Restart Animate</button>
  </body>
  <script> 
   var animation = document.getElementById("an")
    function RestartAnimate() {
        animation.beginElement();
}
  </script>
</html>

这是一种从头开始重新启动 SVG 元素中的 <animate> 的方法吗？

Is here a way to restart from the beginning the <animate> in a SVG element?

svg

rect

jquery-animate