css - SVG 动画不适用于 IE11

Question

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

这是完整的例子: JSFiddle sample

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 不支持什么。

Answer 1

只有 Microsoft Edge 将支持 SVG CSS 过渡和动画。尤其是 stroke-dasharray。

请参阅 Microsoft 开发人员文档:

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+

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

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

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

但是，如果您需要一个跨浏览器解决方案来为 SVG 设置动画，尤其是 stroke-dasharray 和 stroke-dashoffset，那么考虑使用 JS 动画库，例如 GreenSock Animation Platform ( GSAP)。使用 DrawSVGPlugin

https://greensock.com/drawSVG