Pourquoi « transform-origin » ne fonctionne-t-il pas sur les groupes SVG dans Firefox et comment puis-je y remédier ?

Transform-Origin sur les groupes SVG : solution spécifique à Firefox

Dans Firefox, la définition de l'origine de la transformation sur un groupe SVG est une tâche persistante problème, laissant les développeurs perplexes quant à la raison pour laquelle il ne fonctionne apparemment pas. Pour résoudre ce problème, examinons une solution qui s'est avérée efficace.

Pour illustrer ce problème, considérons le code SVG suivant :

<svg>
  <g>

Firefox ignorera la propriété transform-origin, ce qui signifie que les transformations du groupe ne se produiront pas autour de son centre prévu.

La clé pour résoudre ce problème réside dans la modification de la conception SVG. Au lieu de dessiner la forme au sein du groupe, elle doit être créée de telle manière que son centre s'aligne sur l'origine des coordonnées (0, 0). Par exemple :

<svg>
  <rect>

Dans ce scénario, le centre du rectangle s'aligne sur l'origine des coordonnées. Par la suite, vous pouvez utiliser CSS pour créer des transitions et des animations que Firefox exécutera correctement autour du centre du groupe.

Par exemple, l'extrait CSS suivant ferait pivoter le groupe (et le rectangle) autour de son centre dans Firefox :

#myObject {
  transform: rotate(0deg);
  transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject {
  transform: rotate(360deg);
}

Cette solution résout efficacement le problème d'origine de la transformation dans Firefox, permettant des transformations transparentes centrées sur les groupes SVG.

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!