SVG动画无法在IE9/IE10中使用，但可在Firefox和Chrome中使用

请参考下面的代码。SVG动画无法在IE9/IE10中使用，但可在Firefox和Chrome中使用

<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 animate元素在IE浏览器中不起作用。我怎样才能解决这个问题？无论是在IE10浏览器中的错误还是我需要添加任何进一步的代码在IE浏览器中工作。

我已提及以下链接。

Can't make SVG animation work with ie9 and firefox

感谢，

湿婆

来源

2013-03-08 SivaRajini

你是否在IE的调试模式下得到任何javascript错误？ – 2013-03-08 08:55:12

IE中没有javascript错误。显示svg组件，但动画只在IE中不起作用。 – SivaRajini 2013-03-08 08:59:49

您使用SMIL（声明）的动画，这是not supported in Internet Explorer。据我所知，微软并没有计划永远支持它。从this页，

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

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

来源

2013-03-08 11:52:17 SirCxyrtyx

可以使用FakeSMILe制作IE9 +动画声明元素，请参阅http://leunen.me/fakesmile/index.html。 – 2013-03-08 13:32:26

和微软一样：其他人都支持这个标准，但是我们会阻止你使用它。幸运的是，有些图书馆可以填充内容，但猜猜是什么？ IE用户是付出较差性能价格的人。 – 2014-09-12 15:30:13

@ErikDahlström啊，这不适用于背景图片。 FWIW。 – 2014-09-12 18:59:05

SVG动画无法在IE9/IE10中使用，但可在Firefox和Chrome中使用

回答

相关问题