我有一个非常简单的加载动画，在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>
这个动画是一个旋转效果，在IE11上可以正常工作，但是SVG（圆形）无法显示。
有任何想法吗？
我只是想不通IE11不支持什么。
只有微软Edge浏览器支持SVG CSS过渡和动画，尤其是stroke-dasharray。
请参阅微软开发者文档：
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-dasharray和stroke-dashoffset，除非它是Microsoft Edge build 10240+。stroke-dasharray和stroke-dashoffset，那么请考虑使用JS动画库，例如GreenSock Animation Platform (GSAP)。使用DrawSVGPlugin。
IE不支持对SVG元素进行CSS动画。而且它也不支持SVG具有的标准内置SMIL动画。
如果您将动画转换为本机SVG动画，可以尝试使用FakeSmile库使其正常工作。否则，您需要为IE使用一些替代方案 - 例如动态gif或其他东西。
IE11支持CSS3动画，但不支持在SVG元素的子节点上进行动画。您可以对SVG节点本身进行动画处理，因此我的解决方案是将部件分成单独的SVG，并使用CSS3对其进行动画处理。
https://codepen.io/getsetbro/full/Bxeyaw/
即使IE11处于兼容模式下，如果添加了meta标签，这也将起作用。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
对于任何遇到问题的人，我有一个解决方法。
我有一个带有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对象。
就是这样！
animationCSS属性。你可以在这里看到：http://jsfiddle.net/z8w4vuau/50/ ，我如何为.loader-pathcircle元素添加了stroke属性，并增加了stroke-dasharray，以便您可以看到它正在旋转，但IE不会对您的stroke-dasharray和stroke-dashoffset进行动画处理。因此，请改用长格式的CSS动画属性。 - Jonathan Marzullo