IE9 SVG에 애니메이션을 적용 할 때 이상한 동작

나는 fv에서 strokeDashoffset 및 strokeDasharray 메서드를 사용하여 svg 경로에 애니메이션을 적용하고 Chrome에서는 작동하고 IE에서만 정상적으로 보입니다.이 이상한 효과가 나타납니다.IE9 SVG에 애니메이션을 적용 할 때 이상한 동작

온라인 예 - http://www.vicsmash.com/experiments/svganim/

나는 인라인 SVG 테스트 및 getElementsByTagNameNS 상관없이 내가 IE가 동일한를 렌더링 할 때 사용하는 방법 삽입을 반대하지 않습니다 - 전혀 차이 - 또한 setInterval을하고 Requestanimframe 애니메이션에 적용됩니다.

이미지 URL - http://i.stack.imgur.com/aD0EG.png

출처

2013-11-28 VicJ

IE 뭔가를 그리기하지 않는 경우, 수동 forceRedraw 기능을 사용하여 다시 그릴 수있는 SVG를 강제로 기억한다. 여기 문제는 당신이 사용하고있는 플러그인과 관련이 있다고 생각하지만, 불행히도 나는 확신 할 수 없다.

애니메이션 기간 동안 SVG를 다시 그려주는 함수를 생성하여 문제를 해결할 수 있습니다 (플러그인에서 onStart/onEnd 이벤트가 대상 설정 및 간격 지우기를 허용하기를 바랍니다)하지만 " http://jsfiddle.net/eithe/qseGX/이

(I은 document.ready 이벤트와 노드의 이송을 위해 jQuery를 필요 안전하게 코드에서 제거 할 수 있습니다)

출처

2013-11-28 18:11:56 eithed

내가 힘에 다시 그리기 추가 된 : 심지어 여기에 jQuery를 사용하여 바이올린의 "작동합니까 프레임 당 SVGSVGElenment 및 여전히 동일한 작업을 수행합니다. 그게 라이브러리 문제라고 생각하지 않는다. 순수한 js에서 requestanimframe과 interval을 사용하여 똑같이 시도해 보니 작동하지 않는 것 같다. jsfiddle 예제조차도 깨지는 것 같습니다. – VicJ

Ok 재 렌더링은 본질적으로 해답 이었지만 몸에서 처리해야했습니다. 따라서 모든 프레임을 실행하는 내 onUpdate에서 다음을 추가했습니다. var n = document.createTextNode (''); document.body.appendChild (n); document.body.removeChild (n); 이것은 IE 문제를 해결하는 것으로 보입니다. - 예를 들어 나중에 업로드 할 수 있습니다. – VicJ

IE9 SVG에 애니메이션을 적용 할 때 이상한 동작

답변

관련 문제