且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

SVG动画在IE11上不工作

更新时间:2022-12-02 15:21:23

只有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