SVG
Transformation
Suche…
Bemerkungen
Grafische Elemente können durch Hinzufügen eines Transformationsattributs geändert werden.
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>
Anstatt den oberen linken Ursprung in Koordinaten (0, 0) zu rendern, wird er ab Punkt (10, 10) nach unten und rechts angezeigt.
Ganze Elementgruppen können zusammen transformiert werden, und Transformationen können sich gegenseitig ergänzen.
<svg xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(45)">
<rect x="0" y="0" width="30" height="30" />
<circle cx="5" cy="5" r="5" transform="scale(3)" />
</g>
</svg>
Zunächst wird jeder Punkt des Kreises mit dem Faktor 3 in Bezug auf den Ursprung skaliert, wodurch der Mittelpunkt des Kreises bei (15, 15) zur Mitte des Rechtecks und sein Radius auf 15 gebracht werden Der Kreis wird zusammen um 45 Grad im Uhrzeigersinn um den Ursprung gedreht.
Übersetzen
Verschiebe ein Rechteck 10 Einheiten nach rechts und 20 Einheiten nach unten:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" />
</svg>
Verschiebe 0 Einheiten horizontal und 20 Einheiten nach oben:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="20" width="30" height="30" transform="translate(0, -20)" />
</svg>
Verschiebe es um 10 Einheiten nach links und 0 Einheiten vertikal:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="0" width="30" height="30" transform="translate(-10)" />
</svg>
Rahmen
Skalieren Sie ein Rechteck horizontal um den Faktor 2 und vertikal um den Faktor 0,5:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="40" height="40" transform="scale(2, 0.5)" />
</svg>
Das Ergebnis ist äquivalent zu
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="5" width="80" height="20" />
</svg>
Ein Rechteck horizontal spiegeln:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="20" height="40" transform="scale(-1, 1)" />
</svg>
Die Waage arbeitet in Bezug auf den Ursprung, also entspricht dies dem
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-20" y="0" width="20" height="40" />
</svg>
drehen
Drehen Sie ein Polygon um 90 Grad im Uhrzeigersinn um den Ursprung:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90)" />
</svg>
Das Ergebnis ist äquivalent zu
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 0,30 -20,15" />
</svg>
Der Drehpunkt kann explizit angegeben werden:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90, 15, 15)" />
</svg>
Das Ergebnis ist äquivalent zu
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="30,0 30,30 10,15" />
</svg>
SkewX, SkewY
ein Polygon horizontal um 45 Grad neigen:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>
Das Ergebnis ist äquivalent zu
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 60,30 30,30" />
</svg>
x-Werte werden als x + y * tan(angle) berechnet, y-Werte bleiben unverändert
ein Polygon vertikal um 30 Grad neigen:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>
Das Ergebnis ist äquivalent zu (unter Berücksichtigung von Rundungen)
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>
x-Werte bleiben unverändert, y-Werte werden als y + x * tan(angle) berechnet
Matrix
Wenden Sie eine Transformationsmatrix auf ein Polygon an:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="matrix(1,0.6,-1.2,1,40,10)" />
</svg>
Jeder Punkt (x, y) wird durch Anwenden der Matrix (a, b, c, d, e, f) wie folgt transformiert:
┌ x_new ┐ ┌ a c e ┐ * ┌ x_old ┐ ┌ x_old * a + y_old * c + e ┐
└ y_new ┘ = └ b d f ┘ │ y_old │ = └ x_old * b + y_old * d + f ┘
└ 1 ┘
Das Ergebnis ist äquivalent zu
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="40,10 70,28 34,58 4,40" />
</svg>
Mehrere Transformationen
Transformationen können verkettet werden und werden von rechts nach links angewendet
Drehen Sie ein Rechteck um 90 Grad und verschieben Sie es um 20 Einheiten nach unten und um 20 Einheiten nach rechts:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-10" y="-20" width="20" height="40"
transform="translate(20 20) rotate(90)" />
</svg>
Das Ergebnis ist äquivalent zu
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="10" width="40" height="20" />
</svg>