Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Grundlegende Transformationen
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.
Beispiel
<svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g></svg>Alle folgenden Transformationen werden in einemtransform-Attribut eines Elements zusammengefasst. Transformationen können durch Aneinanderreihung und Trennung mit Leerzeichen aneinandergereiht werden.
Translation
Es kann notwendig sein, ein Element zu verschieben, auch wenn Sie es mit den entsprechenden Attributen positionieren können. Für diesen Zweck steht dietranslate()-Transformation zur Verfügung.
<svg width="40" height="50"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /></svg>svg { background-color: #bbffff;}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 als0 angenommen.
Rotation
Das Drehen eines Elements ist eine recht häufige Aufgabe. Verwenden Sie hierfür dierotate()-Transformation:
<svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /></svg>Dieses Beispiel zeigt ein Quadrat, das um 45 Grad gedreht ist. Der Wert fürrotate() wird in Grad angegeben.
Mehrere Transformationen
Transformationen können einfach durch Trennung mit Leerzeichen aneinandergereiht werden. Zum Beispiel sindtranslate() undrotate() häufig verwendete Transformationen.
<svg width="40" height="50"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /></svg>svg { background-color: #bbffff;}Dieses Beispiel zeigt erneut das kleine Quadrat, das diesmal auch um 45 Grad gedreht ist.
Verzerrung
Um aus unserem Rechteck eine Raute zu machen, stehen die TransformationenskewX() undskewY() zur Verfügung. Jede nimmt einen Winkel, der bestimmt, wie weit das Element verzerrt wird.
Skalierung
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 verkleinert0.5 um 50%. Wenn die zweite Zahl weggelassen wird, wird angenommen, dass sie gleich der ersten ist.
Komplexe Transformationen mitmatrix()
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 dermatrix(a, b, c, d, e, f)-Transformation setzen, die Koordinaten von einem vorherigen Koordinatensystem in ein neues Koordinatensystem überträgt durch
Siehe einkonkretes Beispiel in der SVG-Transform-Dokumentation. Um mehr über Transformationen zu lesen, sehen Sie sich denCSS Transformations-Leitfaden an.
Auswirkungen auf Koordinatensysteme
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.
<svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g></svg>Das resultierende Rechteck im obigen Beispiel wird 100x100px groß sein. Die interessanteren Effekte treten auf, wenn Sie sich auf Attribute wieuserSpaceOnUse und dergleichen verlassen.
Einbetten von SVG in SVG
Im Gegensatz zu HTML erlaubt SVG, anderesvg-Elemente nahtlos einzubetten. Auf diese Weise können Sie auch neue Koordinatensysteme erstellen, indem Sie denviewBox,width undheight des innerensvg-Elements nutzen.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <svg width="100" height="100" viewBox="0 0 50 50"> <rect width="50" height="50" /> </svg></svg>Das obige Beispiel hat im Grunde den gleichen Effekt wie das oben genannte, nämlich dass das Rechteck doppelt so groß wie angegeben ist.