Есть ли способ перезапустить с начала <animate>в элементе SVG? - PullRequest
Новая
       36

Есть ли способ перезапустить с начала <animate>в элементе SVG?

1 голос
/ 26 января 2020

Просто нужно знать, как мы можем перезапустить последовательность элементов, которые находятся внутри <svg>. Спасибо.

https://jsfiddle.net/nya13/4hzkno1f/3/

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

1 Ответ

2 голосов
/ 28 января 2020

<button onclick="RestartAnimate();"> Вы должны удалить точку с запятой

Назначить идентификатор анимации <animate id="an"

Назначить begin="indefinite"

В приведенном ниже примере цикл повторяется три раза после нажатие кнопки Перезапуск 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>
...