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

I just can't figure out what is not being supported by IE11.

推荐答案

只有Microsoft Edge 才支持SVG CSS Transitions和Animation .. code> 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

Allows CSS Transitions and Animations to apply to SVG elements.
Unprefixed version: Microsoft Edge build 10240+

例。您的圆元素没有 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.

http://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动画库，如 GreenSock动画平台（ GSAP ）。使用 DrawSVGPlugin

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

http://greensock.com/drawSVG

这篇关于SVG动画在IE11上不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！