Javascript DOM을 통해 완료되면 SVG animate 요소의 endEvent 핸들러가 호출되지 않습니다.

Question

Javascript DOM을 통해 HTML5 SVG를 사용하여 그래픽을 빌드하고 있습니다.

xv 좌표 (y 상수)를 따라 svg 요소 (기본 svg 요소의 하위 요소)를 이동하려면 animate를 사용합니다.

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 요소를 통해 애니메이션 요소를 acccess, 여기까지 작동 완벽하게 정상적으로 애니메이션

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

모든를 시작합니다.

그러나 애니메이션이 끝날 때 같은 개체에 대해 등록 된 처리기는 호출되지 않습니다.

나는 또한 다음과 같은 방법을 시도했다. 그러나 이것도 wotk하지 않았다.

animate.setAttribute('end',animationEnd); 

SVG를 통한 포럼을 Javascript DOM을 통해 광범위하게 검색했습니다. 그러나 javascript DOM을 통해 이벤트 속성을 애니메이션으로 등록하는 데 도움이되지 않았습니다.

내가 How to add an animated svg via javascript?

Check when an animation has ended in SVG

Answer 1

당신은 아마 크롬에서 테스트하는이 포럼에서 확인 질문 중 일부는? onbegin 및 onend 이벤트가 웹킷/깜짝 할 사이에 작동되지 않은 애니메이션을 참고 :

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

서면으로 귀하의 코드는 FF에서 나를 위해 잘 작동 : http://jsfiddle.net/k5wfH/1/ 나는 일부 브라우저의 버그가 있다고 생각

Answer 2

, 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 코드를 수행해야하는지 여부에 따라 달라질 수 있습니다.

Answer 3

이렇게 해보았습니다.

ani.setAttributeNS(null,"onend", "console.log('ding.')"); 
    // ani.addEventListener("onend", "console.log('ding.')", false); // cannot do it like this - events all happen right away