transform

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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 Pendant als CSS-Eigenschaft: transform. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang. Beachten Sie, dass es einige Unterschiede in der Syntax zwischen der CSS-Eigenschaft und dem Attribut gibt!

Elemente

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

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

Auch als Erbe von 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 funktionieren.

Wert

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

Beispiele

Anwenden einer Transformation auf ein einzelnes SVG-Element

In diesem Beispiel wenden wir eine transform-Transformation 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>

Anwenden einer Transformation auf ein gesamtes SVG-Dokument

In diesem Beispiel wenden wir eine transform-Transformation auf das <svg>-Wurzelelement an, was bedeutet, dass 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. Allerdings ist die Kompatibilität nicht garantiert.

Matrix

Die matrix(<a> <b> <c> <d> <e> <f>)-Transformationsfunktion spezifiziert eine Transformation in Form einer Transformationsmatrix aus sechs Werten. matrix(a,b,c,d,e,f) entspricht der Anwendung der Transformationsmatrix:

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

Die die Koordinaten aus einem vorherigen Koordinatensystem in ein neues Koordinatensystem durch die folgenden Matrixgleichungen überträgt:

\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.

Anders ausgedrückt:

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 Drehung um a Grad um einen bestimmten Punkt. Wenn die optionalen Parameter x und y nicht angegeben werden, erfolgt die Drehung um den Ursprung des aktuellen Benutzerkoordinatensystems. Wenn die optionalen Parameter x und y angegeben sind, erfolgt die Drehung 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 Schrägtransformation 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 Schrägtransformation 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

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

Browser-Kompatibilität

Siehe auch

CSS transform-Eigenschaft

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden