SVG запускает анимацию с событием

Question

как мне запустить элемент SVG Animate, чтобы начать анимацию с помощью JavaScript с произвольным событием? Я представляю что-то вроде begin="mySpecialEvent", потом я могу отправить mySpecialEvent и анимация запустится (или запустится снова, если она уже воспроизводилась).

Answer 1

Вот статья, которая охватывает то, что вам нужно:
http://dev.opera.com/articles/view/advanced-svg-animation-techniques/

Редактировать: ссылка удалена.Архивные копии:

• https://github.com/operasoftware/devopera-static-backup/blob/master/http/dev.opera.com/articles/view/advanced-svg-animation-techniques/index.html
• http://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques

Вкратце:

1. Создать<animation> с begin="indefinite", чтобы анимация не воспринималась как начальная при загрузке документа.Вы можете сделать это либо через JavaScript, либо в виде исходного кода SVG.

2. Вызовите beginElement() на экземпляре SVGAnimationElement (элемент <animate>), когда вы 'готовы к началу анимации.В вашем случае используйте стандартный обратный вызов addEventListener(), чтобы вызвать этот метод, когда вы будете готовы, например,

   myAnimationElement.addEventListener('mySpecialEvent',function(){
     myAnimationElement.beginElement();
   },false);
   

Answer 2

Запустить SVG-анимацию:

Без javascript, используя тип «event-value» атрибута begin = «id.event» (без префикса «on») для элемента анимации;или

<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">
  <rect x="10" y="10" width="100" height="100">
    <animate attributeName="x" begin="go.click" dur="2s" from="10" to="300" fill="freeze" />
  </rect>
</svg>

<button id="go">Go</button>

(W3C 2018, "Уровень анимации SVG 2, Черновик редактора", https://svgwg.org/specs/animations/), "Атрибуты для контроля времени анимации", атрибут "начало", "событие-значение "тип значения, https://svgwg.org/specs/animations/#TimingAttributes

Из javascript, установив атрибут begin элемента анимации равным неопределенному"; и вызвав beginElement () из скрипта;

function go () {
  var elements = document.getElementsByTagName("animate");
  for (var i = 0; i < elements.length; i++) {
    elements[i].beginElement();
  }
}

<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="2s" from="10" to="300" fill="freeze" />
  </rect>
</svg>

<button onclick="go();">Go</button>

(W3C 2018, «Уровень анимации SVG 2, черновик редактора», https://svgwg.org/specs/animations/), «Атрибуты для контроля времени анимации», атрибут «begin», тип неопределенного значения, https://svgwg.org/specs/animations/#TimingAttributes