Warum funktioniert die SVG-Gruppe „transform-origin' in Firefox nicht wie erwartet und wie kann ich das Problem beheben?

SVG-Gruppen-Transform-Origin-Problem in Firefox: Eine Lösung

Firefox-Benutzer können bei der Verwendung von Transform-Origin für SVG-Gruppen auf Schwierigkeiten stoßen. Trotz der Versuche, den Ursprung zu zentrieren, bleibt die gewünschte Transformation schwer zu erreichen. Dieses Problem ist auf einen einzigartigen SVG-Zeichenstil in Firefox zurückzuführen.

Um dieses Problem zu beheben, zeichnen Sie die SVG-Form mit ihrem Mittelpunkt am Ursprung (0, 0):

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

Als nächstes Schließen Sie die Form in eine Gruppe ein und verschieben Sie sie an die gewünschte Position:

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

Jetzt können CSS-Übergänge auf diese Gruppe angewendet werden, einschließlich transform-origin und sollte in Firefox korrekt funktionieren:

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

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

Das obige ist der detaillierte Inhalt vonWarum funktioniert die SVG-Gruppe „transform-origin' in Firefox nicht wie erwartet und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!