SVG 애니메이션이 IE9/IE10에서는 작동하지 않지만 Firefox 및 Chrome에서 작동

Question

아래 코드를 참조하십시오.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <clipPath id="curtainClip"> 
      <rect id="clipRect" x="0" y="0" width="100" height="100"/> 
     </clipPath> 
    </defs> 

    <animate xlink:href="#clipRect" 
     attributeName="width" 
     dur="15s" 
     from="0" 
     to="100" /> 

    <path clip-path="url(#curtainClip)" stroke="red" d="M 0 0 L 100 100"/> 
</svg> 

SVG animate 요소가 IE 브라우저에서 작동하지 않습니다. 내가 어떻게 고칠 수 있니? IE10 브라우저에서 버그가 있는지 또는 IE 브라우저에서 작동하도록 추가 코드를 추가해야하는지 여부.

다음 링크를 참조하십시오.

Can't make SVG animation work with ie9 and firefox

감사합니다, 당신은 not supported in Internet Explorer입니다 SMIL (선언) 애니메이션을 사용하고

시바

Answer 1

. 내가 알 수있는 한, 마이크로 소프트는 그것을 지원할 계획이 전혀 없다. this 페이지에서

"스크립트 기반 애니메이션, IE9는 선언적 애니메이션을 지원하지 않기 때문에, 그리고 ( 같은 CSS 애니메이션과 같은) 다른 이유. 간단한에 문뿐만 아니라 복잡한 애니메이션의 가능성을 열어 . "

Microsoft는 실제로 스크립트 기반 애니메이션을 사용하기를 원합니다. 따라서 모든 현재 브라우저에서 SVG를 활성화하려면 Javascript로 SVG를 수행해야합니다. 또는 Microsoft에서 암시 한대로 CSS animation을 사용할 수 있습니다. 제 생각에는 CSS 애니메이션이 예제의 간단한 애니메이션을위한 최선의 선택 일 것입니다.