Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
Nun sind wir bereit, unsere schönen Bilder zu verzerren. Aber zuerst stellen wir formal das <g>-Element vor. Mit diesem Helfer können Sie Eigenschaften auf eine komplette Gruppe von Elementen anwenden. Tatsächlich ist das sein einziger Zweck.
Alle folgenden Transformationen werden in einem transform-Attribut eines Elements zusammengefasst. Transformationen können durch Aneinanderreihung und Trennung mit Leerzeichen aneinandergereiht werden.
Es kann notwendig sein, ein Element zu verschieben, auch wenn Sie es mit den entsprechenden Attributen positionieren können. Für diesen Zweck steht die translate()-Transformation zur Verfügung.
Das Beispiel wird ein Rechteck darstellen, das zum Punkt (30,40) statt (0,0) verschoben ist.
Wenn der zweite Wert nicht angegeben wird, wird er als 0 angenommen.
Das Drehen eines Elements ist eine recht häufige Aufgabe. Verwenden Sie hierfür die rotate()-Transformation:
Dieses Beispiel zeigt ein Quadrat, das um 45 Grad gedreht ist. Der Wert für rotate() wird in Grad angegeben.
Transformationen können einfach durch Trennung mit Leerzeichen aneinandergereiht werden. Zum Beispiel sind translate() und rotate() häufig verwendete Transformationen.
Dieses Beispiel zeigt erneut das kleine Quadrat, das diesmal auch um 45 Grad gedreht ist.
Um aus unserem Rechteck eine Raute zu machen, stehen die Transformationen skewX() und skewY() zur Verfügung. Jede nimmt einen Winkel, der bestimmt, wie weit das Element verzerrt wird.
scale() ändert die Größe eines Elements. Es nimmt zwei Zahlen: die erste ist der x-Skalierungsfaktor und die zweite der y-Skalierungsfaktor. Die Faktoren werden als Verhältnis der transformierten Dimension zur ursprünglichen genommen. Zum Beispiel verkleinert 0.5 um 50%. Wenn die zweite Zahl weggelassen wird, wird angenommen, dass sie gleich der ersten ist.
Alle oben genannten Transformationen können durch eine 2x3-Transformationsmatrix ausgedrückt werden. Um mehrere Transformationen zu kombinieren, kann man die resultierende Matrix direkt mit der matrix(a, b, c, d, e, f)-Transformation setzen, die Koordinaten von einem vorherigen Koordinatensystem in ein neues Koordinatensystem überträgt durch
{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.Siehe ein konkretes Beispiel in der SVG-Transform-Dokumentation. Um mehr über Transformationen zu lesen, sehen Sie sich den CSS Transformations-Leitfaden an.
Bei der Verwendung von Transformationen etablieren Sie ein neues Koordinatensystem innerhalb des Elements, auf das die Transformationen angewendet werden. Das bedeutet, dass die Einheiten, die Sie für das Element und seine Kinder angeben, möglicherweise nicht der 1:1-Pixel-Zuordnung folgen, sondern ebenfalls verzerrt, gedreht, verschoben und skaliert werden entsprechend der Transformation.
Das resultierende Rechteck im obigen Beispiel wird 100x100px groß sein. Die interessanteren Effekte treten auf, wenn Sie sich auf Attribute wie userSpaceOnUse und dergleichen verlassen.
Im Gegensatz zu HTML erlaubt SVG, andere svg-Elemente nahtlos einzubetten. Auf diese Weise können Sie auch neue Koordinatensysteme erstellen, indem Sie den viewBox, width und height des inneren svg-Elements nutzen.
Das obige Beispiel hat im Grunde den gleichen Effekt wie das oben genannte, nämlich dass das Rechteck doppelt so groß wie angegeben ist.
Der Bauplan für ein besseres Internet.
Besuche die gemeinnützige Muttergesellschaft der Mozilla Corporation, die Mozilla Foundation.
Teile dieses Inhalts sind ©1998–2026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter einer Creative-Commons-Lizenz.