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-Eigenschafts-Pendant: transform. Wenn beide spezifiziert sind, hat die CSS-Eigenschaft Vorrang. Beachten Sie jedoch, dass es einige Unterschiede in der Syntax zwischen der CSS-Eigenschaft und dem Attribut gibt. Siehe die Dokumentation zur CSS-Eigenschaft transform für die spezifische Syntax, die in diesem Fall zu verwenden ist.

Dieses Attribut kann mit jedem SVG-Element verwendet werden.

Beispiel

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>

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

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

Wert <transform-list>
Standardwert none
Animierbar Ja

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 Transformationsmatrix mit sechs Werten. matrix(a,b,c,d,e,f) entspricht der Anwendung der Transformationsmatrix:

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

Was Koordinaten aus einem vorherigen Koordinatensystem in ein neues Koordinatensystem durch folgende Matrixgleichungen überführt:

(xnewCoordSysynewCoordSys1)=(acebdf001)(xprevCoordSysyprevCoordSys1)=(axprevCoordSys+cyprevCoordSys+ebxprevCoordSys+dyprevCoordSys+f1) \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
<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 bewegt das Objekt um x und y. Wenn y nicht angegeben wird, wird es als 0 angenommen.

Anders gesagt:

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

Beispiel

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 durch x und y. Wenn y nicht angegeben wird, gilt es als gleich x.

Beispiel

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 Drehung um a Grad um einen gegebenen Punkt. Wenn optionale Parameter x und y nicht angegeben werden, erfolgt die Drehung um den Ursprung des aktuellen Benutzerkoordinatensystems. Wenn optionale Parameter x und y angegeben werden, erfolgt die Drehung um den Punkt (x, y).

Beispiel

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 Schrägtransformation entlang der x-Achse um a Grad.

Beispiel

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 Schrägtransformation entlang der y-Achse um a Grad.

Beispiel

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

Siehe auch