Pourquoi le groupe SVG « transform-origin » ne fonctionne-t-il pas comme prévu dans Firefox et comment puis-je y remédier ?

Problème de transformation-origine du groupe SVG dans Firefox : une solution

Les utilisateurs de Firefox peuvent rencontrer des difficultés lors de l'utilisation de la transformation-origine sur les groupes SVG. Malgré les tentatives de centrer l’origine, la transformation souhaitée reste insaisissable. Ce problème provient d'un style de dessin SVG unique dans Firefox.

Pour résoudre ce problème, dessinez la forme SVG avec son centre à l'origine (0, 0) :

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect>

Ensuite, entourez la forme dans un groupe et traduisez-la à la position souhaitée :

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

Désormais, les transitions CSS peuvent être appliquées à ce groupe, y compris transform-origin, et devraient fonctionner correctement dans Firefox :

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

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

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!