SVG Transform Origin: Um die Grafikmitte drehen

Um SVG-Grafiken mit CSS um ihre eigene Mitte zu drehen, fasse die zusammengehörigen Pfade in einer Gruppe zusammen und wende transform-box: fill-box und transform-origin: center auf diese Gruppe an. Lege dann dort die Drehung fest. Die beiden Eigenschaften beantworten unterschiedliche Fragen: Welches Rechteck dient als Referenz, und wo innerhalb dieses Rechtecks liegt der Drehpunkt?

Wenn dein importiertes Icon über die Zeichenfläche schwingt, prüfe diese Referenz, bevor du seine Pfadkoordinaten änderst. Wenn seine Teile separat drehen, prüfe, welche Elemente die Transformation erhalten. Vorhandene Vektorgrafiken benötigen meist eine Gruppen- oder Transformationskorrektur; Nachzeichnen ist nur nützlich, wenn du zuerst bearbeitbare Pfade aus einer Rasterquelle benötigst.

Warum center allein die Grafik trotzdem verschieben kann

Für ein gewöhnliches SVG-Kindelement wie einen Pfad oder eine Gruppe ist der standardmäßige Transformationsursprung 0 0. SVG-Wurzelelemente haben einen anderen Standardwert. Bei der Standardeinstellung transform-box: view-box bezieht sich der Ursprung center auf den SVG-Referenz-Viewport statt auf die eigenen Grenzen der Grafik. MDNs SVG-Referenz zu transform-origin erklärt die Standardwerte und diese Ausnahmen.

Leerraum um ein Logo ist deshalb relevant. Ein kleines Symbol in einer Ecke einer großen Zeichenfläche hat eine andere Mitte als diese Zeichenfläche. transform-box: fill-box wechselt die Referenz zum Objektbegrenzungsrahmen des Elements. Es beschneidet das SVG nicht und entfernt den Leerraum nicht. Die Referenz zu transform-box definiert die verfügbaren Rahmen, einschließlich stroke-box, wenn eine Referenz einschließlich der Kontur benötigt wird.

Drehe zwei Pfade als ein Zeichen

Speichere dieses vollständige Beispiel als rotation.svg und öffne es im Browser. Es verwendet ein eigenes Quadrat und einen getrennten dreieckigen Akzent, beide vom Koordinatenursprung entfernt. Das CSS gehört in das SVG, damit die eigenständige Datei ihre eigene Drehregel mitführt.

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

Vor der Drehung reicht die kombinierte Grafik von x = 80 bis 220 und y = 50 bis 130. Ihr Rahmen ist 140 Einheiten breit und 80 Einheiten hoch, also liegt seine Mitte bei (150, 90). Quadrat und Akzent behalten ihre Beziehung bei, wenn sich die Gruppe dreht.

Wir renderten vier Zustände derselben Pfade mit festen Winkeln im Browser, lasen ihre Geometrie aus und öffneten das vollständige SVG oben zusätzlich separat. Der Vergleich verwendet breitere Ansichtsbereiche, um Platz für das Ergebnis mit Standardursprung zu lassen. Dies sind von Hand erstellte Demonstrationspfade, keine PerfectVector-Konvertierungsausgabe und kein Test aller Browser und Editoren.

Die Version mit Standardursprung bewegt das Zeichen um (0, 0). Die beiden zentrierten Gruppenvarianten stimmen überein. In der letzten Ansicht dreht sich das Quadrat um (120, 90), der dreieckige Akzent dagegen um (195, 90). Jeder Teil bleibt nahe seiner eigenen Ausgangsposition, aber das Zeichen dreht sich nicht mehr als ein Objekt.

Wähle in deiner eigenen Datei nur die Teile aus, die sich gemeinsam bewegen sollen. Hintergrundrechtecke, Passermarken oder weit entfernte unerwünschte Pfade können die Gruppengrenzen vergrößern. Der SVG-Bearbeitungsworkflow behandelt die Prüfung und Bereinigung der Datei, bevor du Verhalten hinzufügst.

Verwende explizite Koordinaten, wenn der Drehpunkt eine Designentscheidung ist

Ein SVG-Transformationsattribut kann Winkel und Drehpunkt direkt angeben. Ersetze im Beispiel <g class="artwork"> durch <g transform="rotate(35 150 90)">. Lasse die beiden Pfade darin. Das Entfernen der Klasse verhindert außerdem, dass die CSS-Transformation das Attribut überschreibt.

Die Attributform rotate(angle cx cy) verwendet Grad, gefolgt vom Drehpunkt im aktuellen Benutzerkoordinatensystem. CSS rotate(35deg) hat eine andere Syntax und bezieht seinen Ursprung aus der separaten Eigenschaft. Wenn sowohl eine CSS-Transformation als auch das SVG-Transformationsattribut dasselbe Element ansprechen, hat CSS Vorrang. Siehe MDNs Referenz zum transform-Attribut.

Explizite Koordinaten eignen sich für ein Scharnier, einen Zeiger oder einen bewusst versetzten Logodrehpunkt. Halte sie im selben lokalen Koordinatensystem wie die Gruppe, die du drehst. Eine am Bildschirm gemessene Koordinate ist nicht automatisch eine Koordinate, die du in eine verschachtelte SVG-Gruppe einsetzen kannst.

Wenn die vorhandene Gruppe bereits eine Platzierungstransformation hat, behalte sie und lege die Drehung auf eine neue innere Gruppe mit der Grafik. Teste dann die exportierte Datei. Das Ersetzen einer vorhandenen Transformation kann die Verschiebung oder Skalierung verwerfen, die das Zeichen positioniert hat. Wenn eine Skalierungsänderung das Zeichen ebenfalls verschiebt, zeigt das Beispiel zur SVG-Transformationsreihenfolge, wie Verschiebung und Skalierung zusammenwirken.

Lies die Grenzen aus, bevor du eine Mitte berechnest

Für eine einfache Gruppe wie in diesem Beispiel lautet die Mittelpunktberechnung:

cx = x + width / 2
cy = y + height / 2

In unserer Browsermessung lieferte getBBox() für die Gruppe x: 80, y: 50, width: 140 und height: 80. Ihre eigene Drehung änderte diese lokalen Rahmenwerte nicht. Die getBBox-Dokumentation unterscheidet diese Benutzerraumwerte von getBoundingClientRect(), dessen Rechteck relativ zum Browser-Viewport ist.

Für Auswahlumrisse oder eine angepasste viewBox zeigt der SVG-Begrenzungsrahmenworkflow, wie du zwischen diesen Koordinatensystemen umrechnest und Konturränder prüfst.

Miss das Element, das du drehen möchtest. Transformationen untergeordneter Elemente können die Grenzen der umschließenden Gruppe beeinflussen: Unsere Gruppe mit separat gedrehten untergeordneten Elementen hatte andere Grenzen als das ursprüngliche Paar. Prüfe eine Hülle, eine verschachtelte Skalierung oder eine unerwünschte Form, bevor du die einfachen Zahlen oben wiederverwendest.

Die Rahmenmitte ist nicht immer die visuelle Mitte

Das Quadrat in diesem Beispiel nimmt wesentlich mehr Fläche ein als sein dreieckiger Akzent. Der Mittelpunkt ihres gemeinsamen Rahmens liegt trotzdem genau zwischen den äußersten linken und rechten Kanten. Das ist eine geometrische Regel; sie beurteilt nicht, ob das Design beim Drehen ausgewogen wirkt.

Beginne mit der Rahmenmitte, prüfe das Zeichen bei mehreren Winkeln und wechsle zu einem expliziten Drehpunkt, wenn das Design es verlangt. Ein Uhrzeiger benötigt gewöhnlich seinen Befestigungspunkt. Ein Logo mit außermittigem Akzent benötigt möglicherweise eine vom Designer gewählte Mitte. Halte diese Entscheidung von der Korrektur eines versehentlich viewportbasierten Ursprungs getrennt.

Drehung benötigt außerdem Platz. Ein eng um die ungedrehte Grafik zugeschnittener Export kann nach der Drehung Ecken abschneiden. Lasse genügend Platz im Ansichtsbereich und prüfe die Beschneidung durch Elternelemente. Wenn die gesamte Datei im falschen Maßstab importiert wird, nutze die SVG-Größendiagnose, bevor du einzelne Teile änderst.

Dieser Workflow dreht eine vorhandene Form, ohne ihre Kontur umzuschreiben. Wenn du einen Umriss in einen anderen verwandeln möchtest, behandelt der SVG-Morph-Leitfaden das separate Problem passender Pfadgeometrie.

Bereite die Quelle vor dem Festlegen des Drehpunkts vor

Wenn dein Icon nur als PNG oder JPG existiert und du seine einzelnen Formen bearbeiten musst, kann PerfectVector einen SVG-Kandidaten vorbereiten. Konvertiere die Grafik zu Vektoren, prüfe Silhouette und getrennte Details und gruppiere dann die Teile, die gemeinsam drehen sollen. Prüfe vor der Gruppenmessung auf unerwünschte Hintergrundformen.

Ein Rasterbild kann ohne Nachzeichnen als Ganzes rotieren. Verwende Vektorisierung, wenn bearbeitbare Geometrie Teil der Aufgabe ist. Wenn du bereits ein nutzbares Vektororiginal hast, behalte es. Das Ändern des Transformationsursprungs repariert keine beschädigte Kontur, und das Nachzeichnen einer Rasterkopie fügt einen unnötigen Rekonstruktionsschritt hinzu.

Öffne vor der Weitergabe genau dieses SVG erneut in seinem Ziel. Bestätige, dass die gewünschten Teile gemeinsam drehen, der Drehpunkt an der gewählten Stelle bleibt und die gedrehte Grafik Platz hat. Behalte ein unverändertes Original für spätere Bearbeitung. Die SVG-Workflowartikel des Blogs behandeln verwandte Vorbereitungs- und Exportprüfungen.

FAQ

Warum dreht transform-origin: center mein SVG um die Zeichenfläche? Bei einem SVG-Kindelement mit standardmäßiger view-box-Referenz bezieht sich center auf den SVG-Referenz-Viewport. Setze transform-box beim zu drehenden Element auf fill-box, wenn du stattdessen seinen Objektbegrenzungsrahmen möchtest.

Soll ich die Gruppe oder jeden Pfad drehen? Drehe die Gruppe, wenn sich die Teile als ein Zeichen bewegen sollen. Wenn du fill-box und center auf jeden Pfad anwendest, erhält jeder Teil einen eigenen Drehpunkt, wodurch sich die gemeinsame Anordnung verändert.

Lässt fill-box center ein asymmetrisches Logo ausgewogen wirken? Es wählt die Mitte des Objektbegrenzungsrahmens. Visuelle Balance kann einen anderen Drehpunkt erfordern. Prüfe deshalb das Logo bei mehreren Winkeln und wähle bei Bedarf explizite Koordinaten.

Quellen

1. MDN — SVG transform-origin — Definiert SVG-Ursprungsstandards, Ausnahmen für Wurzelelemente und die Beziehung zum Referenzrahmen.
2. MDN — transform-box — Definiert Objekt-, Kontur- und Viewport-Referenzrahmen.
3. MDN — SVG transform — Dokumentiert explizite Drehkoordinaten, Gruppentransformationen und CSS-Vorrang.
4. MDN — getBBox — Erklärt lokale Geometriemessungen und den Unterschied zu Viewport-Rechtecken.

Benötigst du bearbeitbare Formen aus einer Rasterquelle? Bereite mit PerfectVector ein SVG vor, prüfe die rekonstruierten Teile, gruppiere sie dann und kontrolliere den gewählten Drehpunkt in der endgültigen Exportdatei.