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

谢谢，

希瓦

Answer 1

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

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

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

SVG动画不能在IE9 / IE10中运行，但可以在Firefox和Chrome中使用

1 个答案: