Обработчик endEvent анимированного элемента SVG не вызывается при выполнении через Javascript DOM

Я создаю графику с использованием HTML5 SVG через Javascript DOM.

Я использую анимацию для перемещения элемента svg (который является дочерним элементом основного элемента svg) по его координатам x (константа y).

var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
animate.id = i;
animate.setAttribute('attributeName','x');
animate.setAttribute('begin','indefinite');
animate.setAttribute('dur','1s');
animate.setAttribute('fill','freeze');
animate.addEventListener('endEvent',animationEnd,false);
svgChild.appendChild(animate);

Позже я получаю доступ к элементу анимации через элемент svg и запускаю анимацию.

svgChild.firstChild.setAttribute('from',xFrom);
svgChild.firstChild.setAttribute('to',xTo);
svgChild.firstChild.beginElement()

Все работает отлично до сих пор.

Но в конце анимации зарегистрированный для нее обработчик не вызывается.

Я также пробовал следующим образом, но это тоже не сработало.

animate.setAttribute('end',animationEnd);

Я много искал на форумах, создающих SVG через Javascript DOM. Но не смог найти никакой помощи при регистрации для анимации атрибутов событий через javascript DOM.

Некоторые из вопросов, которые я проверил на этом форуме

Как добавить анимированный svg через javascript?

Проверить, когда анимация закончилась в SVG


javascript svg svg-animate
person Loveline    schedule 22.10.2013    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Возможно, вы тестируете в Chrome? Обратите внимание, что события анимации onbegin и onend не работают в Webkit/Blink:

https://code.google.com/p/chromium/issues/detail?id=116595

Ваш написанный код отлично работает для меня в FF: http://jsfiddle.net/k5wfH/1/

person Paul LeBeau    schedule 22.10.2013
comment
Конечные события уже должны работать в Chrome Canary, см. src.chromium.org/viewvc/ blink?revision=157012&view=revision. - person Erik Dahlström; 22.10.2013

arrow_upward
4
arrow_downward

Вот как я это сделал.

  ani.setAttributeNS(null,"onend", "console.log('ding.')");
  // ani.addEventListener("onend", "console.log('ding.')", false);  // cannot do it like this - events all happen right away
person john ktejik    schedule 21.10.2014
comment
Действительно хорошо работает. Но добавление EventListener дает больше гибкости для дальнейшего кодирования. Кстати. очень хорошо. знак равно - person Paulo Bueno; 30.08.2016

arrow_upward
0
arrow_downward

Я думаю, что в некоторых браузерах есть ошибка, поэтому пример не работает для меня в Chrome, ошибка указана по адресу https://code.google.com/p/chromium/issues/detail?id=269648, что здесь применимо? В зависимости от того, что вам нужно сделать, может быть обходной путь. Если вам нужна другая анимация после окончания первой, вы можете связать другую анимацию на основе конца первой, как показано ниже...

  <animateTransform begin="indefinite" additive="sum" fill="none" type="scale" attributeType="XML" attributeName="transform" from="1" to="2" dur="3s" id="animid_1007"></animateTransform>
  <animateTransform begin="animid_1007.end" type="scale" attributeType="XML" attributeName="transform" from="2" to="1" dur="3s"></animateTransform>

Итак, скрипка здесь, показывающая некоторую анимацию, перемещающую круг назад в конце первой анимации. http://jsfiddle.net/wXkC5/2/ Таким образом, это может зависеть от того, нужно ли вам просто сделать больше анимации или какой-нибудь другой код js.

person Ian    schedule 22.10.2013
comment
Я не хочу запускать другую анимацию. - person Loveline; 23.10.2013
comment
Я не уверен, что это возможно так, как вы хотите (это будет в будущем, но в настоящее время это ненадежно). Не могли бы вы установить функцию тайм-аута, которая будет вызываться одновременно с вызовом beginElement(), чтобы функция запускалась в то же время? - person Ian; 23.10.2013