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浏览器的bug还是我需要添加任何进一步的代码才能在IE浏览器中工作

我已经参考了下面的链接。

不能让SVG动画在ie9和firefox中工作

谢谢,湿婆

Answer 1

您正在使用SMIL(声明式)动画，Internet Explorer不支持这种动画。据我所知，微软没有支持它的计划。从本页，

"基于脚本的动画打开了简单和复杂的大门动画的可能性。正因为如此，还有其他原因(比如如CSS动画)，IE9不支持声明式动画。"

微软真的希望你使用基于脚本的动画。因此，如果您希望SVG在所有当前浏览器中显示动画，则需要使用Javascript。或者，正如微软暗示的那样，您可以使用CSS动画。在我看来，CSS动画将是您示例中简单动画的最佳选择。