Pourquoi mon animation SVG ne fonctionne-t-elle pas dans IE11 ?

L'animation SVG ne s'affiche pas dans IE11

Dans le contexte d'une animation SVG ne fonctionnant pas dans IE11, un problème fondamental se pose au niveau de la compatibilité du navigateur. Microsoft Edge est le seul navigateur qui prend en charge les transitions et les animations SVG CSS, en particulier celles impliquant des traits-dasharray.

Incompatibilité IE11

Comme indiqué dans Microsoft Developer Docs, IE11 le fait ne prend pas en charge les transitions et animations CSS sur les éléments SVG. Plus précisément, il ne prend pas en charge l’animation de Stroke-Dasharray et Stroke-Dashoffset. De ce fait, le cercle SVG ne s'affiche pas dans IE11.

Solution pour IE11

Pour assurer la compatibilité avec IE11, il est nécessaire de vérifier si le navigateur est IE et ajustez le trait-dasharray en conséquence. Cependant, cette solution n'est pas idéale car elle nécessite une détection du navigateur.

Solution multi-navigateurs

Pour une solution multi-navigateurs, pensez à utiliser une bibliothèque d'animation JS comme GreenSock Plateforme d'animation (GSAP) avec le DrawSVGPlugin. Ce plugin prend en charge l'animation des éléments SVG, notamment Stroke-Dasharray et Stroke-Dashoffset, dans tous les principaux navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!