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, который не работает в браузере IE. Как я могу это исправить ? будь то ошибка в браузере IE10, или мне нужно добавить любой дополнительный код для работы в браузере IE.

Я упомянул следующую ссылку.

Can't make SVG animation work with ie9 and firefox

Спасибо,

Siva

Answer 1

Вы используете SMIL (декларативной) анимации, которая not supported in Internet Explorer. Насколько я могу судить, Microsoft не планирует ее поддерживать. С this страницы,

«анимация на основе сценариев открывает дверь в простой, а также сложную возможности анимации. Из-за этого, а также по другим причинам (например как CSS-анимация), IE9 не поддерживает декларативную анимацию «.

Microsoft действительно хочет, чтобы вы использовали анимацию на основе сценариев. Поэтому, если вы хотите, чтобы ваш SVG был анимирован во всех существующих браузерах, вам нужно сделать это с помощью Javascript. В качестве альтернативы, как намекнул Microsoft, вы можете использовать CSS animation. На мой взгляд, анимация CSS будет лучшим выбором для простой анимации в вашем примере.