更新时间: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