Why Isn't My SVG Animation Working in IE11?

SVG Animation Not Displaying in IE11

In the context of SVG animation not working in IE11, a fundamental issue arises from browser compatibility. Microsoft Edge is the only browser that supports SVG CSS Transitions and Animations, particularly those involving stroke-dasharray.

IE11 Incompatibility

As outlined in Microsoft Developer Docs, IE11 does not support CSS Transitions and Animations on SVG elements. Specifically, it lacks support for animating stroke-dasharray and stroke-dashoffset. As a result, the SVG circle is not displayed in IE11.

Solution for IE11

To ensure compatibility with IE11, it is necessary to check if the browser is IE and adjust the stroke-dasharray accordingly. However, this solution is not ideal as it requires browser sniffing.

Cross-Browser Solution

For a cross-browser solution, consider using a JS animation library like GreenSock Animation Platform (GSAP) with the DrawSVGPlugin. This plugin provides support for animating SVG elements, including stroke-dasharray and stroke-dashoffset, across all major browsers.

The above is the detailed content of Why Isn't My SVG Animation Working in IE11?. For more information, please follow other related articles on the PHP Chinese website!