Helpful resources ▼
  Download   Pricing   Buy

SVG transformieren mit translate, scale, rotate und skew

SVG-Transformationen ändern, wie grafische Elemente angezeigt werden, ohne die Elementgeometrie selbst umzuschreiben. Verwenden Sie das transform-Attribut, um SVG-Formen mit Funktionen wie translate(), scale(), rotate(), skewX() und skewY() zu verschieben, zu skalieren, zu drehen oder zu neigen. Die Matrixform derselben Idee finden Sie unter Transformationsmatrix.

In diesem Artikel lernen Sie:

  • SVG-Elemente mit translate() zu verschieben.
  • SVG-Elemente mit scale() zu skalieren.
  • SVG-Elemente um den Ursprung oder einen gewählten Punkt zu drehen.
  • SVG-Grafiken mit skewX() und skewY() zu neigen.
  • Zu verstehen, warum die Reihenfolge wichtig ist, wenn mehrere transform functions verkettet werden.

So transformieren Sie SVG-Elemente

  1. Wählen Sie das SVG-Element oder die Gruppe, die transformiert werden soll.
  2. Fügen Sie das transform-Attribut diesem Element oder einer übergeordneten <g>-Gruppe hinzu.
  3. Verwenden Sie translate(tx, ty), um das Element zu verschieben.
  4. Verwenden Sie scale(sx, sy), rotate(angle cx cy), skewX(angle) oder skewY(angle), um die sichtbare Geometrie zu verändern.
  5. Verketten Sie transform functions nur, wenn kombinierte Effekte nötig sind, und prüfen Sie die Reihenfolge sorgfältig.
  6. Verwenden Sie matrix(a,b,c,d,e,f) nur, wenn eine einzelne Matrix klarer ist als getrennte transform functions.

SVG Translation mit translate()

Translation verschiebt jeden Punkt eines Elements um dieselbe Entfernung. Die Funktion translate(tx, ty) verschiebt ein Element um tx entlang der x-Achse und um ty entlang der y-Achse. Wenn ty fehlt, ist der Standardwert 0.

ParameterBeschreibung
txHorizontaler Versatz, positiv nach rechts und negativ nach links
tyVertikaler Versatz, positiv nach unten und negativ nach oben

Die Wirkung von transform="translate(tx, ty)" entspricht der Änderung der Objektkoordinaten nach diesen Formeln:

x(new) = x(old) + tx

y(new) = y(old) + ty

Ein einfaches Beispiel:

 1<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
 2    <g fill="none">
 3        <!-- no translation -->
 4        <circle cx="15" cy="15" r="10" stroke="blue" />
 5        <!-- horizontal translation -->
 6        <circle cx="15" cy="15" r="10" stroke="black" transform="translate(22)" />
 7        <circle cx="15" cy="15" r="10" stroke="red" transform="translate(44)" />
 8        <!-- both horizontal and vertical translation -->
 9        <circle cx="15" cy="15" r="10" stroke="green" transform="translate(33,13)" />
10        <circle cx="15" cy="15" r="10" stroke="yellow" transform="translate(11,13)" />
11	</g>
12</svg>

Im Codebeispiel gruppiert das <g>-Element die Kreise, und fill="none" gilt für jeden Kreis innerhalb der Gruppe. Das Bild unten zeigt den ursprünglichen Kreis und die verschobenen Kopien ( translation.svg):

Fünf olympische Ringe als Illustration einer Translation-Transformation

SVG Scaling mit scale()

Scaling vergrößert oder verkleinert ein Element mit einem Skalierungsfaktor. Die Funktion scale(sx, sy) multipliziert die Breite des Elements mit sx und die Höhe mit sy. Wenn sy fehlt, verwendet SVG denselben Wert wie sx, sodass das Element gleichmäßig skaliert.

ParameterBeschreibung
sxHorizontaler Skalierungsfaktor
syVertikaler Skalierungsfaktor, optional
 1<svg viewBox="-50 -50 200 200" xmlns="http://www.w3.org/2000/svg">
 2    <!-- uniform scale -->
 3    <circle cx="0" cy="0" r="10" fill="#B0C4DE" transform="scale(4)" />
 4    <circle cx="0" cy="0" r="10" fill="#DDA0DD" transform="scale(3)" />
 5    <circle cx="0" cy="0" r="10" fill="#FFB6C1" transform="scale(2)" />
 6    <!-- no scale -->
 7    <circle cx="0" cy="0" r="10" fill="#5F9EA0" />
 8    <g transform="translate(100)">
 9        <!-- uniform scale -->
10        <circle cx="0" cy="0" r="10" fill="#B0C4DE" transform="scale(4)" />
11        <!-- vertical scale -->
12        <circle cx="0" cy="0" r="10" fill="#DDA0DD" transform="scale(1,4)" />
13        <!-- horizontal scale -->
14        <circle cx="0" cy="0" r="10" fill="#FFB6C1" transform="scale(4,1)" />
15        <!-- no scale -->
16        <circle cx="0" cy="0" r="10" fill="#5F9EA0" />
17    </g>
18</svg>

Das resultierende Bild ( scaling.svg):

Vier farbige Kreise als Illustration von SVG scaling

Der Code oben verwendet scale() und translate(). Die erste Gruppe zeigt gleichmäßige Skalierung, bei der beide Achsen denselben Faktor verwenden. Die zweite Gruppe zeigt gerichtete Skalierung: scale(1,4) streckt den Kreis vertikal, während scale(4,1) ihn horizontal streckt.

SVG Rotation mit rotate()

Die Funktion rotate(angle, cx, cy) dreht ein Element um angle Grad um den Punkt (cx, cy). Wenn cx und cy fehlen, rotiert SVG das Element um (0, 0) im aktuellen Koordinatensystem.

ParameterBeschreibung
angleRotationswinkel in Grad, positiv im Uhrzeigersinn
cxX-Koordinate des Rotationszentrums, optional
cyY-Koordinate des Rotationszentrums, optional

Alle Werte für rotate- oder skew-Winkel müssen in Grad angegeben werden. Andere CSS-Winkeleinheiten können hier nicht verwendet werden. Ein positiver Winkel dreht im Uhrzeigersinn, ein negativer Winkel gegen den Uhrzeigersinn.

Hinweis: rotate(angle cx) ist ungültig. Wenn Sie ein Rotationszentrum angeben, müssen sowohl cx als auch cy angegeben werden.

Wie translation verzerrt rotation das Element nicht. Abstände, Winkel und parallele Linien bleiben erhalten.

1<svg width="450" height="450" xmlns="http://www.w3.org/2000/svg">
2    <rect x="100" y="250" width="200" height="30" fill="CadetBlue" />
3    <rect x="100" y="250" width="200" height="30" fill="#DDA0DD" transform ="rotate(-45 200 265)" />
4    <rect x="100" y="250" width="200" height="30" fill="Pink" transform ="rotate(-90 200 265)" />
5    <rect x="100" y="250" width="200" height="30" fill="#B0C4DE" transform ="rotate(45 200 265)" />
6    <rect x="100" y="250" width="200" height="30" fill="CadetBlue" transform ="rotate(-35)" />
7</svg>

Die Funktion transform="rotate(-90 200 265)" dreht das rosa Rechteck 90 Grad gegen den Uhrzeigersinn um (200, 265). Das letzte Rechteck verwendet rotate(-35) ohne Mittelpunkt, deshalb rotiert SVG es um (0, 0). Das Ergebnis ist unten zu sehen:

Fünf gefüllte Rechtecke zeigen SVG-Rotation um einen Punkt und um den Ursprung

Die Beispieldatei rotation.svg enthält das SVG-Rotationsbeispiel.

SVG Skewing mit skewX() und skewY()

Skewing neigt ein Element, indem eine Koordinatenachse verändert wird. Verwenden Sie skewX(angle) für eine Neigung entlang der x-Achse und skewY(angle) für eine Neigung entlang der y-Achse. Der Winkel wird in Grad angegeben. Bei skewX(angle) ändern sich x-Koordinaten, während y-Koordinaten gleich bleiben. Bei skewY(angle) ändern sich y-Koordinaten, während x-Koordinaten gleich bleiben.

Hier ist ein Beispiel für einen Kreis mit skewX(55) ( skew-x.svg):

1<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2    <circle cx="20" cy="20" r="15" stroke="blue" fill="none" />
3    <circle cx="20" cy="20" r="15" stroke="grey" stroke-opacity="0.7" fill="none" transform="skewX(55)" />
4</svg>

Ein einfaches Beispiel für ein Rechteck, das mit skewY(35) geneigt wird ( skew-y.svg):

1<svg  width="800" height="800" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2   <rect x="20" y="20" width="30" height="30" stroke="blue" stroke-opacity="1" fill="none" />
3   <rect x="20" y="20" width="30" height="30" stroke="grey" stroke-opacity="0.5" fill="none" transform="skewY(35)" />
4 </svg>

Die gerenderten Beispiele sehen so aus:

Kreis und Rechteck vor und nach der Anwendung von skewX- und skewY-Funktionen

Häufige Fehler und Korrekturen

ProblemUrsacheLösung
Rechteck bewegt sich nach translate nichttransform-Attribut ist falsch geschrieben oder Anführungszeichen fehlenStellen Sie sicher, dass transform="translate(150,50)" korrekt auf dem Element gesetzt ist
Translation wird nicht angewendettransform-Attribut steht auf einem Parent statt auf dem ZielelementSetzen Sie transform direkt auf das Element, das verschoben werden soll, zum Beispiel <rect>
Unerwartete RotationsrichtungVorzeichen des Winkels wird anders interpretiert als erwartetVerwenden Sie positive Werte für Drehung im Uhrzeigersinn und negative für Drehung gegen den Uhrzeigersinn
Rotation erfolgt um den falschen Punktcx/cy fehlen oder sind auf den Ursprung des Elements gesetztGeben Sie explizite Koordinaten für das Rotationszentrum an oder verschieben Sie den pivot mit einer Vor-Translation
Skew wirkt zu extremWinkel wurde in Radiant statt Grad angegebenGeben Sie Winkel in Grad an, zum Beispiel skewX(30)
Element verschwindet nach scalingSkalierungsfaktor ist 0 oder unbeabsichtigt negativVerwenden Sie positive, von null verschiedene scale-Werte und prüfen Sie die Reihenfolge kombinierter transforms
Kombinierte transforms erzeugen falsches ErgebnisReihenfolge der Funktionen ist vertauschtDenken Sie daran, dass transforms von rechts nach links angewendet werden; translate(...) rotate(...) rotiert zuerst und verschiebt danach

Schnelle Rezepte

EffektSVG-Code zum Kopieren
50 px nach rechts, 30 px nach unten verschieben<rect x="10" y="10" width="40" height="20" transform="translate(50,30)" />
Größe verdoppeln, gleichmäßig<circle cx="20" cy="20" r="10" transform="scale(2)" />
Horizontal 3× strecken<rect x="0" y="0" width="20" height="20" transform="scale(3,1)" />
45° um Zentrum (100,100) drehen<polygon points="90,90 110,90 100,110" transform="rotate(45 100 100)" />
90° im Uhrzeigersinn um Ursprung drehen<line x1="0" y1="0" x2="50" y2="0" stroke="black" transform="rotate(90)" />
X um 30° neigen<rect x="10" y="10" width="30" height="30" transform="skewX(30)" />
Y um -20° neigen<circle cx="25" cy="25" r="15" transform="skewY(-20)" />
Verkettung: verschieben und drehen<g transform="translate(100,50) rotate(30)"><rect width="40" height="10" fill="red"/></g>

FAQ – SVG-Transformationen

Was macht das SVG-transform-Attribut?

Das transform-Attribut wendet eine geometrische Transformation auf ein SVG-Element oder eine Gruppe an. Es verändert die Anzeige des Elements, schreibt aber Attribute wie x, y, cx, cy oder path data nicht um.

Was ist der Unterschied zwischen translate und scale?

translate(tx, ty) verschiebt ein Element, ohne seine Größe zu ändern. scale(sx, sy) verändert die Elementgröße und kann auch die sichtbare Position verschieben, weil scaling relativ zum Ursprung des Koordinatensystems erfolgt.

Wie drehe ich SVG um einen Mittelpunkt?

Verwenden Sie rotate(angle cx cy) und geben Sie beide Mittelpunktkoordinaten an. Zum Beispiel dreht transform="rotate(45 100 100)" das Element 45 Grad um den Punkt (100, 100).

Wann sollte ich matrix statt transform functions verwenden?

Verwenden Sie einzelne Funktionen wie translate(), scale() und rotate(), wenn Lesbarkeit wichtig ist. Verwenden Sie matrix(a,b,c,d,e,f), wenn Sie eine kombinierte Transformation oder berechnete Werte aus einem Tool oder einer API benötigen.

Spezifikation und verwandte Ressourcen

SVG-Text SVG-Transformationsmatrix