SVG-Transformationsreihenfolge: Skalieren und platzieren

Beim SVG-Attribut transform="translate(60 25) scale(2)" wird ein Quellpunkt zunächst um den Faktor zwei skaliert und dann bei der Abbildung in das übergeordnete Koordinatensystem horizontal um 60 und vertikal um 25 Einheiten verschoben. Kehrst du die Liste zu scale(2) translate(60 25) um, wird auch diese Verschiebung verdoppelt. Die Grafik hat dieselbe Größe, aber eine andere Position.

Wenn ein Logo nach dem Ändern seiner Größe springt, prüfe die Transformationsliste, bevor du seine Pfade bearbeitest. Eine nützliche Anordnung ist eine äußere Gruppe für die Platzierung und eine innere Gruppe für die Skalierung. Beide Aufgaben bleiben sichtbar, und die ursprünglichen Grafikkoordinaten stehen für spätere Bearbeitungen weiterhin zur Verfügung.

Verfolge einen Punkt, statt die Reihenfolge zu erraten

Nimm den Quellpunkt (10, 10). Bei einer Skalierung um 2 und einer Verschiebung um (60, 25) ergeben die beiden Listen:

Beide Punkte stammen aus derselben Quellkoordinate. Die zweite Liste skaliert neben der Grafik auch die Verschiebung. Ihre Endposition unterscheidet sich um (60, 25) von der ersten.

Vielleicht siehst du scheinbar widersprüchliche Beschreibungen der Reihenfolge. Die SVG-Spezifikation beschreibt eine Liste als verschachtelte Koordinatensysteme in der geschriebenen Reihenfolge: Die Transformation ganz links wird zur äußeren Gruppe. Wenn du einen Quellpunkt durch diese Gruppen nach außen verfolgst, wirkt die innerste Operation zuerst auf ihn. Die W3C-Definition des transform-Attributs zeigt die entsprechende Verschachtelung ausdrücklich.

Arbeite bei der Punktberechnung von der Funktion ganz rechts nach links. Lies die Gruppenstruktur von außen nach innen. Behalte die gewählte Betrachtungsweise während der gesamten Berechnung bei.

Vergleiche dieselbe zweiteilige Bildmarke

Speichere dieses vollständige Beispiel als transform-order.svg und öffne es in einem Browser. Seine Grafik ist ein eigener quadratischer Ring mit separatem dreieckigem Akzent. Die Öffnung ist echter Leerraum, definiert durch die Even-odd-Füllregel.

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"
     viewBox="0 0 350 200">
  <g id="art" transform="translate(60 25) scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</svg>

Ändere nur das Gruppenattribut in transform="scale(2) translate(60 25)". Die Bildmarke bewegt sich weiter nach rechts und unten, während ihre Größe und der Abstand zwischen ihren Teilen gleich bleiben.

Wir renderten beide Listen und eine entsprechende Variante mit verschachtelten Gruppen in einem Browser. Die Vergleichsfelder verwenden identische Koordinatenbereiche; die blasse Bildmarke zeigt die ursprüngliche Geometrie. Jeder rote Punkt markiert, wo der Quellpunkt (10, 10) landet.

Die lokale Begrenzung der ursprünglichen Grafik lautet x=10, y=10, width=95, height=40. Die erste Anordnung erzeugt Grenzen in Wurzelkoordinaten von x=80, y=45, width=190, height=80. Die umgekehrte Liste erzeugt x=140, y=70 bei derselben Größe von 190 × 80.

Diese Messungen beschreiben diese einfache Testgrafik ohne Kontur. Das Beispiel hat weder Animation noch CSS-Transformation. Es demonstriert die Zusammensetzung von Koordinaten, nicht die Konvertierungsqualität von PerfectVector oder die Kompatibilität mit jedem SVG-Editor.

Trenne Platzierung und Größe mit verschachtelten Gruppen

Ersetze die ursprüngliche Gruppe durch diese Struktur und behalte ihre Pfade unverändert:

<g transform="translate(60 25)">
  <g id="art" transform="scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</g>

Das entspricht translate(60 25) scale(2) auf einer einzelnen Gruppe. Die äußere Verschiebung positioniert das skalierte Koordinatensystem. Das Ändern der inneren Skalierung lässt die äußeren Verschiebungswerte bei (60, 25).

Das bedeutet nicht, dass beim Ändern der Skalierung jeder sichtbare Punkt fest bleibt. Ein Punkt abseits des lokalen Ursprungs bewegt sich weiterhin, wenn seine Koordinaten multipliziert werden. Entscheide vor der Wahl der Verschiebung, welcher Quellpunkt die Grafik verankern soll.

Angenommen, die Quellecke (10, 10) des Rings soll nach einer Skalierung um 2 bei (120, 80) landen. Berechne:

tx = targetX - scale × anchorX = 120 - 2 × 10 = 100
ty = targetY - scale × anchorY =  80 - 2 × 10 =  60

Verwende translate(100 60) scale(2). Die Ecke wird jetzt auf (120, 80) abgebildet. Eine direkte Verschiebung um (120, 80) würde den lokalen Ursprung dort platzieren und die Ecke weiter rechts und unten lassen.

Diese Berechnung setzt gleichmäßige Skalierung ohne Drehung oder Scherung voraus. Für einen bewusst gewählten Drehpunkt verwende den Leitfaden zu SVG transform-origin. Halte jede Transformation auf der Gruppe, die für diese Aufgabe zuständig ist, statt unabhängige Korrekturen durch Ausprobieren zu kombinieren.

Lies bei verschachtelten Dateien die gerenderte Abbildung aus

Ein importiertes SVG kann bereits Transformationen auf mehreren Vorfahren haben. Wenn du nur das Attribut der nächstgelegenen Gruppe betrachtest, fehlt ihre kombinierte Wirkung. Die transform-Referenz von MDN weist außerdem darauf hin, dass eine CSS-Transformation Vorrang hat, wenn CSS-Eigenschaft und Präsentationsattribut dasselbe Element ansprechen. Prüfe berechnete Stile, wenn eine Attributänderung scheinbar nichts bewirkt.

Bei einem gerenderten Inline-SVG bildet dieses Snippet den Punkt der gewählten Gruppe in die Benutzerkoordinaten des Wurzel-SVG ab:

const root = document.querySelector('svg');
const art = document.querySelector('#art');
const rootMatrix = root.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error('SVG is not measurable');
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const point = new DOMPoint(10, 10).matrixTransform(toRoot);
const result = { x: point.x, y: point.y };

Die inverse Wurzelmatrix entfernt die gemeinsame Bildschirmabbildung der Wurzel. Das ist wichtig, weil die Darstellung des Beispiels mit 700 × 400 doppelt so groß ist wie seine viewBox von 350 × 200. Bildschirmpixel und SVG-Koordinaten sind hier unterschiedliche Einheiten. MDN dokumentiert die Abbildung, die getScreenCTM() zurückgibt.

Unser Browser-Vergleich ergab matrix(2 0 0 2 60 25) für die erste Liste und die verschachtelte Variante. Die umgekehrte Liste ergab matrix(2 0 0 2 120 50). In diesem Beispiel mit Skalierung und Verschiebung machen die letzten beiden Zahlen die unterschiedliche Verschiebung deutlich.

Das Snippet setzt invertierbare zweidimensionale Transformationen voraus. Eine Skalierung auf null eignet sich nicht für diese Prüfung mit inverser Matrix. Für Überlagerungen, eingepasste Exporte, Konturen oder gedrehte Begrenzungen verwende den ausführlicheren Ablauf für SVG-Grenzen.

Erwarte nicht, dass getBBox() auf der Grafikgruppe die transformierte Wurzelposition zurückgibt. Sein lokales Ergebnis schließt die eigene Transformation dieses Elements und die Transformationen seiner Vorfahren aus, wie die getBBox-Referenz erklärt. Eine lokale Begrenzung kann gleich bleiben, während sich die Bildmarke sichtbar bewegt.

Korrigiere die Transformation, bevor du die Grafik neu aufbaust

Arbeite an einer SVG-Kopie. Identifiziere die Pfade, die sich gemeinsam bewegen sollen, und prüfe dann ihre Gruppe und deren Vorfahren. Halte einen erkennbaren Ankerpunkt und das gewünschte Ziel für diesen Punkt fest.

Ändere jeweils nur eine Transformation. Wenn die Größe stimmt, aber die Platzierung falsch ist, vergleiche die Verschiebung der beiden Reihenfolgen. Wenn sich die Teile unabhängig bewegen, lege ihre gemeinsame Platzierung auf eine umgebende Gruppe. Halte einen Drehpunkt von der Frage zur Skalierungsreihenfolge getrennt.

Öffne die gespeicherte Datei erneut in ihrer Zielumgebung und prüfe die vollständige Ausdehnung der Bildmarke. Auch eine korrekte Transformation kann Grafik über die viewBox hinaus oder in einen Beschneidungsbereich verschieben. Der SVG-Bearbeitungsleitfaden behandelt den umfassenderen Bereinigungs- und Exportprozess.

Wenn die Bildmarke nur als PNG oder JPG vorliegt und du bearbeitbare Konturen brauchst, kann PerfectVectors Logo-Vektorisierer einen SVG-Kandidaten vorbereiten. Prüfe Silhouette, Öffnung und getrennte Formen, gruppiere anschließend die rekonstruierte Grafik und wende Platzierungstransformationen in deinem Editor oder Code an.

Eine Bitmap lässt sich ohne Vektorisierung verschieben und skalieren. Verwende Nachzeichnen, wenn bearbeitbare Formen erforderlich sind, und erhalte eine vorhandene Vektor-Masterdatei. Für exakte Logogeometrie oder Schrift kann weiterhin manuelle Rekonstruktion nötig sein; der Leitfaden zur Logo-Vektorisierung erklärt die Wahl dieser Ausgangsmethode.

FAQ

Wendet SVG Transformationen von links nach rechts oder rechts nach links an? Die Liste entspricht verschachtelten Koordinatensystemen in der geschriebenen Reihenfolge, von außen nach innen. Wenn du berechnest, wo ein Quellpunkt landet, wendest du zuerst die Funktion ganz rechts an und arbeitest nach außen nach links weiter.

Warum verschiebt das Vertauschen von translate und scale das Logo? Wenn in der Attributliste scale vor translate steht, multipliziert die Skalierung auch die Verschiebung. Steht translate vor scale, bleibt die Verschiebung außerhalb dieser Skalierung. Dieselben Werte können daher gleiche Größen an unterschiedlichen Positionen erzeugen.

Hält eine äußere Verschiebung jeden Punkt fest, wenn ich die innere Gruppe skaliere? Nein. Sie hält die äußeren Verschiebungswerte von der inneren Skalierung getrennt. Punkte abseits des lokalen Ursprungs bewegen sich beim Skalieren weiterhin. Wähle einen Ankerpunkt und berechne die Verschiebung, die zu seiner Platzierung nötig ist.

Quellen

1. W3C — SVG-transform-Attribut — Definiert die Beziehung zwischen Transformationslisten und verschachtelten Koordinatensystemen.
2. MDN — SVG transform — Dokumentiert Transformationssyntax, Matrixabbildung und CSS-Vorrang.
3. MDN — getScreenCTM — Beschreibt die Matrix zur Abbildung von SVG-Koordinaten in Richtung Dokument-Viewport.
4. MDN — getBBox — Erklärt lokale Grenzen und den Ausschluss der Transformationen des gemessenen Elements.

Wenn dein Quelllogo bearbeitbare Geometrie braucht, bereite mit PerfectVector einen SVG-Kandidaten vor, prüfe Konturen und separate Teile, wähle dann einen Anker und bestätige seine Endposition nach dem Skalieren.