Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

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 Attributtransform definiert eine Liste von Transformationen, die auf ein Element und die Kinder des Elements angewendet werden.

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

Elemente

In SVG 2 kann dastransform-Attribut auf jedes Element angewendet werden, einschließlich des<svg>-Roots. Beachten Sie, dass die Verwendung vontransform auf dem<svg>-Root eine neuere Funktion ist und Sie dieBrowser-Kompatibilität für die Unterstützung überprüfen sollten. Die Verwendung vontransform auf dem<svg>-Root ist praktisch, um Transformationen auf ein gesamtes SVG-Bild anzuwenden, ohne dass zusätzliche Umwicklungselemente oder CSS-Workarounds erforderlich sind.

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

Ebenfalls aus SVG 1.1 geerbt, unterstützen<linearGradient> und<radialGradient> dasgradientTransform-Attribut, und<pattern> unterstützt daspatternTransform-Attribut, die beide genau wie dastransform-Attribut funktionieren.

Wert

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

Beispiele

Eine Transformation auf ein einzelnes SVG-Element anwenden

In diesem Beispiel wenden wir einetransform-Operation 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           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>

Eine Transformation auf ein gesamtes SVG-Dokument anwenden

In diesem Beispiel wenden wir einetransform-Operation auf das<svg>-Root-Element 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           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 vomtransform-Attribut<transform-list> verwendet werden.

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

Matrix

Diematrix(<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:

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

Welche Koordinaten von einem vorherigen Koordinatensystem in ein neues Koordinatensystem durch die folgenden Matrixgleichungen abbildet:

(\begin{matrix} x_{newCoordSys} \\ y_{newCoordSys} \\ 1 \end{matrix}) = (\begin{matrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{matrix}) (\begin{matrix} x_{prevCoordSys} \\ y_{prevCoordSys} \\ 1 \end{matrix}) = (\begin{matrix} a x_{prevCoordSys} + c y_{prevCoordSys} + e \\ b x_{prevCoordSys} + d y_{prevCoordSys} + f \\ 1 \end{matrix}) \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

Dietranslate(<x> [<y>])-Transformationsfunktion verschiebt das Objekt umx undy. Wenny nicht angegeben wird, wird es als0 angenommen.

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

Diescale(<x> [<y>])-Transformationsfunktion spezifiziert eine Skalierung nachx undy. Wenny nicht angegeben wird, wird angenommen, dass es gleichx 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

Dierotate(<a> [<x> <y>])-Transformationsfunktion spezifiziert eine Rotation uma Grad um einen gegebenen Punkt. Wenn die optionalen Parameterx undy nicht angegeben sind, erfolgt die Rotation um den Ursprung des aktuellen Benutzerkoordinatensystems. Wenn die optionalen Parameterx undy 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

DieskewX(<a>)-Transformationsfunktion spezifiziert eine Schertransformation entlang der x-Achse uma 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

DieskewY(<a>)-Transformationsfunktion spezifiziert eine Schertransformation entlang der y-Achse uma 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

CSStransform-Eigenschaft

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

Movatterモバイル変換

transform

Beispiel

Beispiel

Beispiel

Beispiel

Beispiel

Beispiel

Help improve MDN