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/

Из 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/