Grundlegende Transformationen

<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 sind im transform-Attribut eines Elements zusammengefasst. Transformationen können durch Leerzeichen getrennt verkettet werden.

Es kann notwendig sein, ein Element zu verschieben, selbst wenn man es mit den entsprechenden Attributen positionieren kann. Zu diesem Zweck steht die translate()-Transformation bereit.

<svg width="40" height="50">
  <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>

svg {
  background-color: #bff;
}

Das Beispiel wird ein Rechteck erzeugen, das zum Punkt (30,40) anstelle von (0,0) verschoben ist.

Wenn der zweite Wert nicht angegeben ist, wird angenommen, dass dieser 0 ist.

Das Drehen eines Elements ist eine ziemlich häufige Aufgabe. Verwenden Sie dafür die rotate()-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ür rotate() wird in Grad angegeben.

Transformationen können einfach verkettet werden, indem man sie durch Leerzeichen trennt. Zum Beispiel sind translate() und rotate() häufig genutzte 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: #bff;
}

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 geneigt 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 Originaldimension betrachtet. 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 abbildet durch

Sehen Sie sich ein konkretes Beispiel in der SVG-Transformationsdokumentation an. Um mehr über Transformationen zu erfahren, schauen Sie sich den CSS-Transformaten Leitfaden an.

Beim Verwenden 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, geneigt, 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 ergeben sich, wenn man sich auf Attribute wie userSpaceOnUse und dergleichen verlässt.

Im Gegensatz zu HTML erlaubt SVG das nahtlose Einbetten anderer svg-Elemente. Auf diese Weise können Sie auch neue Koordinatensysteme erstellen, indem Sie das viewBox-, width- und height-Attribut des inneren svg-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 Wesentlichen denselben Effekt wie das vorherige, nämlich dass das Rechteck doppelt so groß ist wie angegeben.

• Zurück
• Weiter