Question

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

以下是完整示例： JSFiddle sample

SVG：

Collectors.toList()

动画是一个旋转，正在IE11上工作，但是没有显示SVG，它是一个圆圈。

有什么想法吗？

我无法弄清楚IE11不支持的内容。

Answer 1

只有Microsoft Edge才支持SVG CSS Transitions和Animation ..尤其是stroke-dasharray。

请参阅Microsoft Developer Docs：

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

允许CSS过渡和动画应用于SVG元素未加前缀的版本：Microsoft Edge build 10240 +

正如你在我的例子中看到的那样。由于stroke元素上没有circle属性，您没有看到加载器旋转。

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

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

但是，如果您需要跨浏览器解决方案来动画SVG，尤其是stroke-dasharray和stroke-dashoffset。然后研究使用像GreenSock Animation Platform（GSAP）这样的JS动画库。使用DrawSVGPlugin

https://greensock.com/drawSVG

Answer 2

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

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

Answer 3

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

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

如果添加元标记

，如果IE11处于兼容模式，这甚至可以使用

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

Answer 4

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

我有一个带有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对象。

那就是它！

SVG动画无法在IE11上运行

4 个答案: