SVGanimation不适用于IE11
我有一个非常简单的加载animation，完美的Firefox和Chrome浏览器，但在IE11它没有显示SVG的数字。
这里是完整的例子： JSFiddle示例
SVG：
<svg class="circular-loader" viewBox="25 25 50 50"> <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/> </svg> animation，这是一个旋转，在IE11上工作，但SVG，这是一个圆形，没有被显示。
任何想法？
我只是无法弄清楚什么不被IE11支持。
只有Microsoft Edge将支持SVG CSS转换和animation，特别是stroke-dasharray 。
请参阅Microsoft开发人员文档：
https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements
允许CSS转换和animation应用于SVG元素。
没有预设的版本：Microsoft Edge版本10240+
正如你在我的例子中看到的那样。 你没有看到装载机旋转，因为你的circle元素没有stroke属性。
https://jsfiddle.net/z8w4vuau/50/
你可以看到它现在如何旋转。 但是你将不得不检查浏览器是否是IE浏览器，并调整你的stroke-dasharray以便它更大。 由于IE11及其以下版本不支持使用CSSanimation或转换对SVG stroke-dasharray和stroke-dashoffset进行animation处理，除非是Microsoft Edge构build10240+。
但是，如果您需要跨浏览器解决scheme来为SVG设置animation，特别是stroke-dasharray和stroke-dashoffset 。 然后看看使用像GreenSockanimation平台 （ GSAP ）的JSanimation库。 使用DrawSVGPlugin
IE不支持SVG元素的CSSanimation。 它也不支持SVG标准的内置SMILanimation。
如果您将animation转换为原生SVGanimation，则可以使用FakeSmile库进行工作 。 否则，你将需要使用一些替代回退的IE浏览器 – 如animationGIF或其他东西。
对于有这个麻烦的人，我有一个解决方法。
我有一个完整的SVG与ID和CSSanimation，所有其他主要浏览器的完美工作。
我有我的SVG插入到HTML，所以我可以访问每个项目与CSSanimation。
为了这个工作，你必须让你的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，因此CSSanimation将应用于完整的SVG，而不是SVG对象。
而就是这样！
