transform

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Das transform Attribut definiert eine Liste von Transformationsdefinitionen, die auf ein Element und die Kinder des Elements angewendet werden.

Hinweis: Als Präsentationsattribut hat transform auch ein entsprechendes CSS-Attribut: transform. Wenn beide angegeben sind, hat das CSS-Attribut Vorrang. Beachten Sie, dass es Unterschiede in der Syntax zwischen dem CSS-Attribut und dem Attribut gibt!

Elemente

In SVG 2 können Sie das transform Attribut auf jedes Element anwenden, einschließlich des <svg> Wurzelelements. Beachten Sie, dass die Verwendung von transform auf dem <svg> Wurzel eine neuere Funktion ist und Sie die Browser-Kompatibilität für die Unterstützung überprüfen sollten. Die Verwendung von transform auf dem <svg> Wurzel ist praktisch, um Transformationen auf ein ganzes SVG-Bild anzuwenden, ohne dass zusätzliche Wrapper-Elemente oder CSS-Umgehungen erforderlich sind.

In SVG 1.1 durften nur diese 16 Elemente ein transform erhalten: <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text>, und <use>.

Ebenso unterstützen <linearGradient> und <radialGradient> aus SVG 1.1 das gradientTransform Attribut und <pattern> unterstützt das patternTransform Attribut, die beide genau wie das transform Attribut funktionieren.

Wert

Wert	`<transform-list>`
Standardwert	none
Animierbar	Ja

Beispiele

Anwendung einer Transformation auf ein einzelnes SVG-Element

In diesem Beispiel wenden wir ein transform auf ein einzelnes <g> Element innerhalb eines SVG-Dokuments an:

html,
body,
svg {
  height: 100%;
}

html

<svg
  viewBox="-40 0 150 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g
    fill="grey"
    transform="rotate(-10 50 100)
               translate(-36 45.5)
               skewX(40)
               scale(1 0.5)">
    <path
      id="heart"
      d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>

  <use href="#heart" fill="none" stroke="red" />
</svg>

Anwendung einer Transformation auf ein gesamtes SVG-Dokument

In diesem Beispiel wenden wir ein transform auf das <svg> Wurzelelement an, wodurch die Transformation auf das gesamte SVG-Dokument angewendet wird:

html

<svg
  viewBox="-40 0 150 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  transform="rotate(-10 50 100)
               translate(-36 15.5)
               skewX(40)
               scale(1 0.5)">
  <g fill="grey">
    <path
      id="heart"
      d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>

  <use href="#heart" fill="none" stroke="red" />
</svg>

Transformationsfunktionen

Die folgenden Transformationsfunktionen können durch das transform Attribut <transform-list> verwendet werden.

Warnung: Laut Spezifikation sollten Sie auch CSS Transformationsfunktionen verwenden können. Die Kompatibilität ist jedoch nicht garantiert.

Matrix

Die matrix(<a> <b> <c> <d> <e> <f>) Transformationsfunktion spezifiziert eine Transformation in Form einer 6-Werte-Transformationsmatrix. matrix(a,b,c,d,e,f) ist gleichbedeutend mit der Anwendung der Transformationsmatrix:

\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}

Die Koordinaten werden durch die Matrixgleichheiten von einem vorherigen in ein neues Koordinatensystem abgebildet:

\begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix}

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="20" fill="green" />

  <!--
  In the following example we are applying the matrix:
  [a c e]    [3 -1 30]
  [b d f] => [1  3 40]
  [0 0 1]    [0  0  1]

  which transform the rectangle as such:

  top left corner: oldX=10 oldY=10
  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50
  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80

  top right corner: oldX=40 oldY=10
  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140
  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110

  bottom left corner: oldX=10 oldY=30
  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30
  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140

  bottom right corner: oldX=40 oldY=30
  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
  -->
  <rect
    x="10"
    y="10"
    width="30"
    height="20"
    fill="red"
    transform="matrix(3 1 -1 3 30 40)" />
</svg>

Translate

Die translate(<x> [<y>]) Transformationsfunktion verschiebt das Objekt um x und y. Wenn y nicht angegeben ist, wird angenommen, dass es 0 ist.

Mit anderen Worten:

xNew = xOld + <x>
yNew = yOld + <y>

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- No translation -->
  <rect x="5" y="5" width="40" height="40" fill="green" />

  <!-- Horizontal translation -->
  <rect
    x="5"
    y="5"
    width="40"
    height="40"
    fill="blue"
    transform="translate(50)" />

  <!-- Vertical translation -->
  <rect
    x="5"
    y="5"
    width="40"
    height="40"
    fill="red"
    transform="translate(0 50)" />

  <!-- Both horizontal and vertical translation -->
  <rect
    x="5"
    y="5"
    width="40"
    height="40"
    fill="yellow"
    transform="translate(50 50)" />
</svg>

Scale

Die scale(<x> [<y>]) Transformationsfunktion spezifiziert eine Skalierungsoperation um x und y. Wenn y nicht angegeben ist, wird angenommen, dass es gleich x ist.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- uniform scale -->
  <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />

  <!-- vertical scale -->
  <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" />

  <!-- horizontal scale -->
  <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4, 1)" />

  <!-- No scale -->
  <circle cx="0" cy="0" r="10" fill="black" />
</svg>

Rotate

Die rotate(<a> [<x> <y>]) Transformationsfunktion spezifiziert eine Rotation um a Grad um einen gegebenen Punkt. Wenn die optionalen Parameter x und y nicht angegeben sind, erfolgt die Rotation um den Ursprung des aktuellen Benutzerkoordinatensystems. Wenn die optionalen Parameter x und y angegeben sind, erfolgt die Rotation um den Punkt (x, y).

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="10" height="10" />

  <!-- rotation is done around the point 0,0 -->
  <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />

  <!-- rotation is done around the point 10,10 -->
  <rect
    x="0"
    y="0"
    width="10"
    height="10"
    fill="green"
    transform="rotate(100, 10, 10)" />
</svg>

SkewX

Die skewX(<a>) Transformationsfunktion spezifiziert eine Schertransformation entlang der x-Achse um a Grad.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
</svg>

SkewY

Die skewY(<a>) Transformationsfunktion spezifiziert eine Schertransformation entlang der y-Achse um a Grad.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
</svg>

Spezifikationen

Specification
CSS Transforms Module Level 1 # svg-transform
Scalable Vector Graphics (SVG) 2 # TransformProperty

Browser-Kompatibilität

Siehe auch

CSS transform Eigenschaft