1

请参考以下代码。

<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 浏览器中工作。

我已经提到了以下链接。

无法使用 ie9 和 firefox 制作 SVG 动画

谢谢，

湿婆

4

1 回答 1

3

您正在使用Internet Explorer 不支持的SMIL（声明性）动画。据我所知，微软没有计划支持它。从这个页面，

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

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

于 2013-03-08T11:52:17.530 回答