Pourquoi mes animations SVG sont-elles interrompues dans IE11 et comment puis-je les réparer ?

Problèmes d'animation SVG dans IE11 : résolution des limitations de prise en charge

Les utilisateurs d'IE11 peuvent rencontrer des problèmes avec les animations SVG, en particulier avec l'affichage des éléments SVG. Une simple animation de chargement qui fonctionne parfaitement dans Firefox et Chrome peut ne pas s'afficher correctement dans IE11, laissant la figure SVG invisible.

Pour résoudre ce problème, il est essentiel de comprendre la prise en charge limitée par IE11 des fonctionnalités SVG. Malheureusement, IE11 ne prend pas en charge les transitions et les animations CSS pour les éléments SVG, y compris « Stroke-dasharray ».

Comme indiqué dans Microsoft Developer Docs, « Microsoft Edge prendra en charge les transitions et animations CSS SVG, en particulier Stroke-Dasharray. " Cependant, les utilisateurs d'IE11 ne bénéficieront pas de cette prise en charge.

Pour le démontrer, considérons cet exemple modifié :

<svg class="circular-loader" viewbox="25 25 50 50">
  <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke="orange" stroke-width="2" stroke-miterlimit="10"></circle>
</svg>

Dans IE11, le chargeur ne pivotera pas car l'attribut de trait est manquant dans le élément de cercle. Pour le faire tourner, ajoutez l'attribut :

stroke="orange"

Bien que cette solution de contournement résout le problème de visibilité, l'animation de Stroke-dasharray ou de Stroke-dashoffset SVG avec CSS n'est toujours pas prise en charge dans IE11 et versions antérieures.

Pour implémenter des solutions d'animation SVG multi-navigateurs, envisagez d'utiliser des bibliothèques d'animation JavaScript telles que GreenSock Animation Platform (GSAP) avec DrawSVGPlugin. Ce plugin fournit une prise en charge complète de l'animation d'éléments SVG, notamment Stroke-Dasharray et Stroke-dashoffset.

En conclusion, la prise en charge limitée d'IE11 pour les animations SVG oblige les développeurs à trouver des solutions alternatives, telles que des bibliothèques JavaScript, pour obtenir l'animation souhaitée. effets sur tous les 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!