Pourquoi « transform-origin » ne fonctionne-t-il pas correctement sur les groupes SVG dans Firefox ?

Résolution des problèmes d'origine de transformation dans le groupe SVG pour Firefox

Énoncé du problème

Définition de l'origine de transformation sur un groupe SVG ne semble pas avoir d'effet dans Firefox. Bien que cela fonctionne comme prévu dans les navigateurs Webkit, l'origine de la transformation ne s'aligne pas correctement lorsqu'elle est utilisée dans Firefox.

Exemple de code

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
 ...
}

Solution

Pour résoudre ce problème, il est recommandé de dessiner la forme SVG originale avec son centre aux coordonnées (0, 0). Cela implique de décaler l'origine de la forme pour l'aligner correctement sur l'origine de transformation attendue.

SVG révisé

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect>

En plaçant le centre de la forme à ( 0, 0), l'origine de la transformation peut désormais être correctement appliquée, ce qui entraîne le comportement de transformation souhaité dans Firefox.

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!