Warum funktioniert „transform-origin' bei SVG-Gruppen in Firefox nicht und wie kann ich das Problem beheben?

Transformationsursprung für SVG-Gruppen: Firefox-spezifische Lösung

In Firefox ist das Festlegen des Transformationsursprungs für eine SVG-Gruppe eine dauerhafte Einstellung Problem, das die Entwickler ratlos zurücklässt, warum es scheinbar nicht funktioniert. Um dieses Problem anzugehen, wollen wir uns mit einer Lösung befassen, die sich als effektiv erwiesen hat.

Um dieses Problem zu veranschaulichen, betrachten Sie den folgenden SVG-Code:

<svg>
  <g>

Firefox ignoriert die Eigenschaft „transform-origin“. Dies bedeutet, dass die Transformationen der Gruppe nicht um ihr vorgesehenes Zentrum herum stattfinden.

Der Schlüssel zur Lösung dieses Problems liegt in der Änderung des SVG-Designs. Anstatt die Form innerhalb der Gruppe zu zeichnen, sollte sie so erstellt werden, dass ihr Mittelpunkt mit dem Koordinatenursprung (0, 0) übereinstimmt. Beispiel:

<svg>
  <rect>

In diesem Szenario wird die Mitte des Rechtecks ​​am Koordinatenursprung ausgerichtet. Anschließend können Sie CSS verwenden, um Übergänge und Animationen zu erstellen, die Firefox ordnungsgemäß um die Mitte der Gruppe herum ausführt.

Zum Beispiel würde das folgende CSS-Snippet die Gruppe (und das Rechteck) in Firefox um ihre Mitte drehen:

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

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

Diese Lösung löst effektiv das Transformationsursprungsproblem in Firefox und ermöglicht nahtlose Transformationen rund um SVG-Gruppen.

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