SVG 动画在 IE9/IE10 中不起作用，但在 Firefox 和 chrome 中起作用答案

【问题标题】：SVG animation not working in IE9/IE10 but works in Firefox and chromeSVG 动画在 IE9/IE10 中不起作用，但在 Firefox 和 chrome 中起作用
【发布时间】：2013-02-23 18:14:15
【问题描述】：

请参考以下代码。

<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

谢谢，

湿婆

【问题讨论】：

在 IE 的 debug 模式下是否遇到任何 javascript 错误？
IE 中没有 javascript 错误。 svg 组件显示，但动画仅在 IE 中不起作用。

标签： jquery svg jquery-svg

【解决方案1】：

您正在使用 SMIL（声明性）动画，即 not supported in Internet Explorer。据我所知，微软没有计划支持它。来自this页面，

“基于脚本的动画打开了简单和复杂的大门动画的可能性。正因为如此，以及其他原因（如作为 CSS 动画），IE9 不支持声明式动画。”

Microsoft 确实希望您使用基于脚本的动画。因此，如果您希望您的 SVG 在所有当前浏览器中都具有动画效果，则需要使用 Javascript 来实现。或者，正如 Microsoft 所暗示的，您可以使用 CSS animation。在我看来，CSS 动画将是您示例中简单动画的最佳选择。

【讨论】：

可以使用 FakeSMILe 制作 IE9+ 动画声明性元素，见leunen.me/fakesmile/index.html。
与 Microsoft 一样：其他所有人都支持此标准，但我们会阻止您使用它。值得庆幸的是，有一些库可以填充东西，但你猜怎么着？ IE 用户是为较差的性能付出代价的人。
@ErikDahlström 啊，这在背景图像中不起作用。 FWIW。