Warum funktioniert „transform-origin' bei SVG-Gruppen in Firefox nicht richtig?

Transform-Origin-Probleme in der SVG-Gruppe für Firefox lösen

Problembeschreibung

Transform-Origin für eine SVG-Gruppe festlegen scheint in Firefox keine Wirkung zu haben. Während dies in Webkit-Browsern wie vorgesehen funktioniert, wird der Transformationsursprung bei Verwendung in Firefox nicht richtig ausgerichtet.

Codebeispiel

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

Lösung

Um dieses Problem zu beheben, wird empfohlen, die ursprüngliche SVG-Form mit ihrem Mittelpunkt an der Koordinate (0, 0) zu zeichnen. Dazu gehört das Verschieben des Ursprungs der Form, um ihn korrekt am erwarteten Transformationsursprung auszurichten.

Überarbeitetes SVG

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

Durch Platzieren des Mittelpunkts der Form bei ( 0, 0) kann der Transformationsursprung nun korrekt angewendet werden, was zum gewünschten Transformationsverhalten innerhalb von Firefox führt.

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