SVG 요소에 대한 동적 애니메이션이 IE에서 작동하지 않습니다.

jquery로 DOM 요소를 동적으로 추가하는 동안 SVG 요소의 애니메이션을 처리하려고합니다. 나는이에 대한 working.Working 샘플 아래로 <body> 내부에 이러한 요소를 추가하는 경우, http://jsfiddle.net/bZdfH/2/SVG 요소에 대한 동적 애니메이션이 IE에서 작동하지 않습니다.

<svg> 
    <script type="text/ecmascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/> 
    <circle cx="60" cy="60" r="20" style="fill: pink; stroke: red;" > 
    <animate attributeName="r" dur="4s" values="20; 0; 20" repeatCount="indefinite"/> 
    </circle> 
</svg>

내가 동적으로 추가 할 때 애니메이션이 IE에서 시작되지 않습니다이다 그러나 그것은 크롬으로 작동하고 FireFox.Here은 무엇입니까 나는 가지고있다.

<svg> 
<script type="text/ecmascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/> 
<circle cx="60" cy="60" r="20" style="fill: pink; stroke: red;" onmouseover="changeImage(this)" > 
</circle> 
</svg> 
<script> 
    function changeImage(circle) { 
     while (circle.firstChild) { 
     circle.removeChild(circle.firstChild); 
     } 
     circle.setAttributeNS(null, "fill", "blue"); 
     var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate"); 
     animate.setAttributeNS(null, "attributeName", "r"); 
     animate.setAttributeNS(null, "values", "20;0;20"); 
     animate.setAttributeNS(null, "dur", "6s"); 
     animate.setAttributeNS(null, "repeatCount", "indefinite"); 
     circle.appendChild(animate); 
     } 
</script>

여기 Working Sample에 대해 jsfiddle입니다. 아무도 도와주세요.

출처

2013-12-13 Swarna Latha

아마이 도움이 될 수 있습니다 http://stackoverflow.com/questions/11459460/fakesmile-with-ie9 – pablo

IE는 SMIL 애니메이션을 지원하지 않습니다. 출처 : http://caniuse.com/#search=svg

출처

2013-12-13 13:50:03 Rudi

가 동적으로 생성을 위해 작동하지 않는 이유 statically.Then을 요소를 작성하는 동안 그것은 노력하고 있습니다 그 요소들. 어떤 이유? –

IE9 이상에서는 SVG가 SMIL 애니메이션을 통해 애니메이션을 지원하지 않기 때문에 지원합니다. (잘 모르겠다면 잘 모르겠다.) – Rudi

필자가 언급 한 두 가지 모두에서 SMIL 애니메이션을 사용했다. 첫 번째 바이올린의 IE 애니메이션에서 올바르게 작동하고 DOM 요소를 동적으로 추가 한 두 번째 바이올린에서 작동하지 않는다. –

SVG 요소에 대한 동적 애니메이션이 IE에서 작동하지 않습니다.

답변

관련 문제