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 in dem transform-Attribut eines Elements zusammengefasst. Transformationen können durch Verkettung miteinander kombiniert werden, wobei sie durch Leerzeichen getrennt werden.

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

<svg width="40" height="50" style="background-color:#bff;">
  <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>

Das Beispiel zeigt ein Rechteck, das zum Punkt (30,40) statt (0,0) übersetzt wurde.

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:

<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 durch Trennung mit Leerzeichen miteinander verkettet werden. Zum Beispiel sind translate() und rotate() häufig verwendete Transformationen.

<svg width="40" height="50" style="background-color:#bff;">
  <rect
    x="0"
    y="0"
    width="10"
    height="10"
    transform="translate(30,40) rotate(45)" />
</svg>

Dieses Beispiel zeigt erneut das kleine Quadrat oben, das diesmal auch um 45 Grad gedreht ist.

Um aus unserem Rechteck einen Rhombus zu machen, stehen die Transformationen skewX() und skewY() zur Verfügung. Jede nimmt einen Winkel als Parameter, der bestimmt, wie weit das Element verzerrt wird.

scale() ändert die Größe eines Elements. Es benötigt zwei Zahlen, wobei die erste der x-Skalierungsfaktor und die zweite der y-Skalierungsfaktor ist. Die Faktoren werden als Verhältnis der transformierten Dimension zur ursprünglichen genommen. Zum Beispiel, 0.5 schrumpft 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 einstellen, die Koordinaten von einem vorherigen Koordinatensystem in ein neues überführt durch

Sehen Sie sich ein konkretes Beispiel in der SVG-Transformationsdokumentation an. Detaillierte Informationen zu dieser Eigenschaft finden Sie in der SVG-Empfehlung.

Durch die Verwendung von Transformationen etablieren Sie ein neues Koordinatensystem innerhalb des Elements, auf das die Transformationen angewendet werden. Das bedeutet, die Einheiten, die Sie für das Element und seine Kinder angeben, müssen nicht dem 1:1-Pixel-Mapping folgen, sondern werden ebenfalls entsprechend der Transformation verzerrt, verschoben, übersetzt und skaliert.

<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 wie userSpaceOnUse und dergleichen verlassen.

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

• Zurück
• Weiter