SVG动画不工作的IE浏览器11 [英] SVG animation not Working on IE 11

问题描述

我有一个非常简单的加载动画，工程PERFECTO在Firefox和Chrome，但在资源管理器中，它不是ashowing SVG的身影。

i have a really simple loading animation that works perfecto on Firefox and Chrome, but in explorer, its not ashowing 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>

动画，至极是旋转工作的IE浏览器，但是SVG，至极是cricle，不被显示。任何想法？
我只是无法弄清楚什么是不被IE soported

The animation, wich is a rotation is working on IE, but the SVG, wich is a cricle, is not being displayed. Any idea? I just cant figure out what is not being soported by IE

推荐答案

只有微软边缘将支持SVG CSS过渡和动画..尤其是中风-dasharray 。

Only Microsoft Edge will support SVG CSS Transitions and Animation.. especially stroke-dasharray.

请请参阅Microsoft Developer文档：

Please see the Microsoft Developer Docs:

<一个href=\"https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements\" rel=\"nofollow\">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+

正如你可以在我的例子叉看到的。你没有看到装载机旋由于没有在你的圈子行程属性元素。

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，并调整中风dasharray 所以它是大出风头。由于IE11及以下不支持动画SVG 中风dasharray 和中风dashoffset 用CSS动画或过渡，除非它为微软边缘积聚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，特别是中风dasharray 和中风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动画不工作的IE浏览器11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！