CSS SVG 动画不适用于 IE11
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33812303/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG animation is not working on IE11
提问by canute
I have a really simple loading animation that works perfectly on Firefox and Chrome, but in IE11 it's not showing the SVG figure.
我有一个非常简单的加载动画，可以在 Firefox 和 Chrome 上完美运行，但在 IE11 中它没有显示 SVG 图。
Here is the full example: JSFiddle sample
这是完整的示例： JSFiddle 示例
SVG:
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>
The animation, which is a rotation, is working on IE11, but the SVG, which is a circle, is not being displayed.
旋转动画正在 IE11 上运行，但未显示圆形的 SVG。
Any idea?
任何的想法？
I just can't figure out what is not being supported by IE11.
我只是无法弄清楚 IE11 不支持什么。
回答by Jonathan Marzullo
Only Microsoft Edge will support SVG CSS Transitions and Animation.. especially stroke-dasharray.
只有 Microsoft Edge 将支持 SVG CSS 过渡和动画……尤其是stroke-dasharray.
Please see the Microsoft Developer Docs:
请参阅 Microsoft 开发人员文档：
https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements
https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements
Allows CSS Transitions and Animations to apply to SVG elements.
Unprefixed version: Microsoft Edge build 10240+
允许将 CSS 过渡和动画应用于 SVG 元素。
无前缀版本：Microsoft Edge build 10240+
As you can see in my fork of your example. You were not seeing the loader spin due to not having the strokeattribute on your circleelement.
正如你在我的例子中看到的那样。由于stroke您的circle元素上没有该属性，您没有看到加载器旋转。
https://jsfiddle.net/z8w4vuau/50/
https://jsfiddle.net/z8w4vuau/50/
You can see how it can spin now. But you will have to check if the browser is IE and adjust your stroke-dasharrayso it is larger dash. Since IE11 and below do not support animating SVG stroke-dasharrayand stroke-dashoffsetwith CSS animation or transitions, unless it is Microsoft Edge build 10240+.
你现在可以看到它是如何旋转的。但是您必须检查浏览器是否为 IE 并调整您的浏览器，stroke-dasharray使其成为更大的破折号。由于 IE11 及以下不支持动画 SVGstroke-dasharray和stroke-dashoffsetCSS 动画或过渡，除非它是 Microsoft Edge build 10240+。
But if you need a cross browser solution to animate SVG, especially stroke-dasharrayand stroke-dashoffset, then look into using a JS animation library like the GreenSock Animation Platform(GSAP). Using the DrawSVGPlugin
但是，如果您需要跨浏览器的解决方案来为 SVG 设置动画，尤其是stroke-dasharray和stroke-dashoffset，那么可以考虑使用 JS 动画库，例如GreenSock 动画平台( GSAP)。使用DrawSVGPlugin
回答by Paul LeBeau
IE does not support CSS animation of SVG elements. It also doesn't support the standard built-in SMIL animations that SVG has.
IE 不支持 SVG 元素的 CSS 动画。它也不支持 SVG 具有的标准内置 SMIL 动画。
If you convert your animation to native SVG animations, you could perhaps get it working using the FakeSmile library. Otherwise you will need to use some alternative fallback for IE - such as an animated gif or something.
如果您将动画转换为原生 SVG 动画，您或许可以使用FakeSmile 库使其工作。否则，您将需要为 IE 使用一些替代后备 - 例如动画 gif 或其他东西。
回答by getsetbro
IE11 supports CSS3 animations but not on child nodes of an SVG element. You can animate the SVG node itself so my solution is to break up the parts into separate SVGs and animate those with CSS3.
IE11 支持 CSS3 动画，但不支持 SVG 元素的子节点。您可以为 SVG 节点本身设置动画，因此我的解决方案是将这些部分分解为单独的 SVG 并使用 CSS3 为这些部分设置动画。
https://codepen.io/getsetbro/full/Bxeyaw/
https://codepen.io/getsetbro/full/Bxeyaw/
This will even work if IE11 is in compatibility mode if you add the meta tag
如果您添加元标记，即使 IE11 处于兼容模式，这也将起作用
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
回答by Gabiton
For anyone having trouble with this, I have a workaround.
对于遇到此问题的任何人，我有一个解决方法。
I had a full SVG with IDs and CSS animations, all working perfect for all the other major browsers.
我有一个带有 ID 和 CSS 动画的完整 SVG，所有这些都适用于所有其他主要浏览器。
I have my SVG inserted into the HTML, so I can access every item with CSS animations.
我将我的 SVG 插入到 HTML 中，因此我可以使用 CSS 动画访问每个项目。
For this to work, you have to have your SVG with position:
为此，您必须让 SVG 具有位置：
absolute; top: 0px; left: 0px,
... inside a container .svgcontent(or whatever you want to call it)
...在一个容器内.svgcontent（或任何你想称之为的）
Script:
脚本：
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);
});
}
This takes all the elements in the objsarray, and insert them as a full SVG behind the first one (you can change prependto appendto change this behavior).
这将获取objs数组中的所有元素，并将它们作为完整的 SVG 插入到第一个元素之后（您可以更改prepend为append以更改此行为）。
And the SVG is going to have the same id as the object, so the CSS animate is going to apply to a full SVG, not an SVG object.
并且 SVG 将具有与对象相同的 id，因此 CSS 动画将应用于完整的 SVG，而不是 SVG 对象。
And that's it!
就是这样！
