SVG 动画不适用于 IE11

Posted

技术标签:

【中文标题】SVG 动画不适用于 IE11【英文标题】:SVG animation is not working on IE11 【发布时间】:2016-02-22 02:12:33 【问题描述】:

我有一个非常简单的加载动画,可以在 Firefox 和 Chrome 上完美运行,但在 IE11 中它没有显示 SVG 图。

以下是完整示例: JSFiddle sample

SVG:

<svg class="circular-loader" viewBox="25 25 50 50">
  <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke- stroke-miterlimit="10"/>
</svg>

动画是旋转,在 IE11 上运行,但 SVG 是圆形的,没有显示。

有什么想法吗?

我只是想不通 IE11 不支持什么。

【问题讨论】:

哪个版本的IE? 我在 explorer 11 上测试 您必须为在 IE 中看到的颜色定义 stroke 属性。但我认为你将不得不使用单独的 CSS 动画属性而不是简写 animation CSS 属性。你可以在这里看到:jsfiddle.net/z8w4vuau/50 .. 我是如何在.loader-path circle 元素上为颜色添加stroke 属性并增加stroke-dasharray 所以你可以看到它在旋转,但IE 没有为你的@ 设置动画987654330@ 和stroke-dashoffset。因此,只需使用长格式 CSS 动画属性即可。 我的时间不多了.. 但是一旦您使用长格式 CSS 动画属性并将 stroke 属性添加到您的circle 元素,这将使您成功一半:jsfiddle.net/z8w4vuau/50跨度> 【参考方案1】:

只有 Microsoft Edge 将支持 SVG CSS 过渡和动画。尤其是 stroke-dasharray

请参阅 Microsoft 开发人员文档:

https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements

允许 CSS 过渡和动画应用于 SVG 元素。 无前缀版本:Microsoft Edge build 10240+

正如您在我的示例中看到的那样。由于您的 circle 元素上没有 stroke 属性,您没有看到加载程序旋转。

https://jsfiddle.net/z8w4vuau/50/

您现在可以看到它是如何旋转的。但是您必须检查浏览器是否为 IE 并调整您的 stroke-dasharray 使其变大。由于 IE11 及更低版本不支持使用 CSS 动画或过渡对 SVG stroke-dasharraystroke-dashoffset 进行动画处理,除非它是 Microsoft Edge build 10240+。

但是,如果您需要跨浏览器解决方案来为 SVG 制作动画,尤其是 stroke-dasharraystroke-dashoffset,那么请考虑使用像 GreenSock Animation Platform (GSAP) 这样的 JS 动画库。使用DrawSVGPlugin

https://greensock.com/drawSVG

【讨论】:

在 Edge (20.10240.16384.0) 中查看它根本不起作用。我从小提琴中删除了所有不需要的东西,这样更容易看到:jsfiddle.net/z8w4vuau/55 Microsoft 声明它支持 stroke-dasharray 上的 CSS Animations on reference for stroke-dasharray page msdn.microsoft.com/en-us/library/ff972274(v=vs.85).aspx .. 但它是 IE,因此 css 过渡和 css 动画会出现错误或无法工作的行为..可能是浏览器错误?但是您是否尝试过像 GreenSock GSAP DrawSVGPlugin 这样的 JS 解决方案?在 IE Edge 中查看此页面上的示例 .. greensock.com/drawSVG 我正在使用 JS-library-diet 可以这么说 :) 但我知道我可以使用 javascript 来做到这一点。但是,这并不重要,所以我只是在 IE/Edge 中检测并禁用这些动画,直到修复为止。 根据这个答案,我决定使用 Modernzr 的“no-smil”类来定位 IE11 上的 SVG 动画。这样我就可以选择一个静态图形并仍然使用相同的 SVG。【参考方案2】:

IE11 支持 CSS3 动画,但不支持 SVG 元素的子节点。您可以为 SVG 节点本身设置动画,因此我的解决方案是将各个部分分解为单独的 SVG,并使用 CSS3 为它们设置动画。

https://codepen.io/getsetbro/full/Bxeyaw/

如果您添加元标记,即使 IE11 处于兼容模式,这也可以工作

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

【讨论】:

这很有趣,我越想越意识到它可能会解决我的问题而无需进行重大返工。【参考方案3】:

对于遇到此问题的任何人,我有一个解决方法。

我有一个带有 ID 和 CSS 动画的完整 SVG,所有其他主要浏览器都可以完美运行。

我已将 SVG 插入 html,因此我可以使用 CSS 动画访问每个项目。

为此,您的 SVG 必须具有以下位置:

absolute; top: 0px; left: 0px, 

...在容器内.svgcontent(或任何你想叫它的名字)

脚本:

var IE = (navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1) ? true : false;
objs = [ '#file1', '#file2','#file3','#file4','#file5','#file6','#file7','#file8','#file9','#file10','#file11', '#bottom' ];
if ( IE )
    objs.forEach(function (item) 
        item = $(item);
        id = item.attr('id');
        svgcontent = item.closest('.svgcontent')
        svg = item.closest('svg');
        svgattrs = ' width='+svg.attr('width')+' height='+svg.attr('height')+' '
        html = '<svg id="'+id+'" '+svgattrs+'>'+item.html()+'</svg>';
        item.remove();
        $(svgcontent).prepend(html);        
    );

这会获取 objs 数组中的所有元素,并将它们作为完整的 SVG 插入到第一个元素后面(您可以将 prepend 更改为 append 以更改此行为)。

并且 SVG 将与对象具有相同的 id,因此 CSS 动画将应用于完整的 SVG,而不是 SVG 对象。

就是这样!

【讨论】:

您能否提供一个有效的jsFiddle 来证明这在 IE 中有效?【参考方案4】:

IE 不支持 SVG 元素的 CSS 动画。它也不支持 SVG 具有的标准内置 SMIL 动画。

如果您将动画转换为原生 SVG 动画,您或许可以使用 FakeSmile library 使其正常工作。否则,您将需要为 IE 使用一些替代后备 - 例如动画 gif 或其他东西。

【讨论】:

以上是关于SVG 动画不适用于 IE11的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript + SVG不适用于Tor和IE

SVG + css3 动画不适用于链接标记

我的动画 CSS 不适用于 Firefox 和 IE

带有变换的css关键帧动画不适用于SVG

为啥这个 CSS3 动画在 MS Edge 或 IE11 中不起作用?

css 过渡动画不适用于 svg 路径的“d”属性更改