SVG 动画不适用于 IE11 [英] SVG animation is not working on IE11
问题描述
我有一个非常简单的加载动画，可以在 Firefox 和 Chrome 上完美运行，但在 IE11 中它没有显示 SVG 图.
I have a really simple loading animation that works perfectly on Firefox and Chrome, but in IE11 it's not showing the SVG figure.
这是完整的示例: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 没有显示圆形.
The animation, which is a rotation, is working on IE11, but the SVG, which is a circle, is not being displayed.
有什么想法吗?
我无法弄清楚 IE11 不支持什么.
I just can't figure out what is not being supported by IE11.
推荐答案
只有 Microsoft Edge 将支持 SVG CSS 过渡和动画......尤其是 stroke-dasharray.
Only Microsoft Edge will support SVG CSS Transitions and Animation.. especially stroke-dasharray.
请参阅 Microsoft 开发人员文档:
Please see the Microsoft Developer Docs:
https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements
允许将 CSS 过渡和动画应用于 SVG 元素.
无前缀版本:Microsoft Edge build 10240+
Allows CSS Transitions and Animations to apply to SVG elements.
Unprefixed version: Microsoft Edge build 10240+
正如你在我的例子中看到的那样.由于 circle 元素上没有 stroke 属性，您没有看到加载器旋转.
As you can see in my fork of your example. You were not seeing the loader spin due to not having the stroke attribute on your circle element.
https://jsfiddle.net/z8w4vuau/50/
你现在可以看到它是如何旋转的.但是您必须检查浏览器是否为 IE 并调整您的 stroke-dasharray 使其成为更大的破折号.由于 IE11 及以下不支持使用 CSS 动画或过渡为 SVG stroke-dasharray 和 stroke-dashoffset 设置动画，除非它是 Microsoft Edge build 10240+.
You can see how it can spin now. But you will have to check if the browser is IE and adjust your stroke-dasharray so it is larger dash. Since IE11 and below do not support animating SVG stroke-dasharray and stroke-dashoffset with CSS animation or transitions, unless it is Microsoft Edge build 10240+.
但是如果你需要一个跨浏览器的解决方案来为 SVG 设置动画，尤其是 stroke-dasharray 和 stroke-dashoffset，那么可以考虑使用一个 JS 动画库，比如
But if you need a cross browser solution to animate SVG, especially stroke-dasharray and stroke-dashoffset, then look into using a JS animation library like the GreenSock Animation Platform (GSAP). Using the DrawSVGPlugin
这篇关于SVG 动画不适用于 IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
