SVGTransform

Baseline Widely available

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

SVG-Transform-Schnittstelle

SVGTransform ist die Schnittstelle für eine der Komponenten-Transformationen innerhalb einer SVGTransformList; somit entspricht ein SVGTransform-Objekt einer einzelnen Komponente (z.B. scale(…) oder matrix(…)) innerhalb eines transform-Attributs.

Ein SVGTransform-Objekt kann als schreibgeschützt festgelegt werden. Das bedeutet, dass Versuche, das Objekt zu ändern, zu einer Ausnahme führen.

Schnittstellenübersicht

Implementiert auch Keine
Methoden
  • void setMatrix(in [`DOMMatrix`](/de/docs/Web/API/DOMMatrix) matrix)
  • void setTranslate(in float tx, in float ty)
  • void setScale(in float sx, in float sy)
  • void setRotate(in float angle, in float cx, in float cy)
  • void setSkewX(in float angle)
  • void setSkewY(in float angle)
Eigenschaften
  • readonly unsigned short type
  • readonly float angle
  • readonly [`DOMMatrix`](/de/docs/Web/API/DOMMatrix) matrix
Konstanten
  • SVG_TRANSFORM_UNKNOWN = 0
  • SVG_TRANSFORM_MATRIX = 1
  • SVG_TRANSFORM_TRANSLATE = 2
  • SVG_TRANSFORM_SCALE = 3
  • SVG_TRANSFORM_ROTATE = 4
  • SVG_TRANSFORM_SKEWX = 5
  • SVG_TRANSFORM_SKEWY = 6
Normatives Dokument SVG 1.1 (2nd Edition)

Konstanten

Name Wert Beschreibung
SVG_TRANSFORM_UNKNOWN 0 Der Einheitstyp ist nicht einer der vordefinierten Einheitstypen. Es ist ungültig zu versuchen, einen neuen Wert dieses Typs zu definieren oder einen vorhandenen Wert auf diesen Typ zu ändern.
SVG_TRANSFORM_MATRIX 1 Eine matrix(…)-Transformation
SVG_TRANSFORM_TRANSLATE 2 Eine translate(…)-Transformation
SVG_TRANSFORM_SCALE 3 Eine scale(…)-Transformation
SVG_TRANSFORM_ROTATE 4 Eine rotate(…)-Transformation
SVG_TRANSFORM_SKEWX 5 Eine skewx(…)-Transformation
SVG_TRANSFORM_SKEWY 6 Eine skewy(…)-Transformation

Instanz-Eigenschaften

Name Typ Beschreibung
[`type`](/de/docs/Web/API/SVGTransform/type) unsigned short Der Typ des Werts, wie durch eine der SVG_TRANSFORM_*-Konstanten definiert, die in dieser Schnittstelle definiert sind.
[`angle`](/de/docs/Web/API/SVGTransform/angle) float Ein Komfortattribut für SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX und SVG_TRANSFORM_SKEWY. Es hält den angegebenen Winkel.

Für SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE und SVG_TRANSFORM_SCALE wird angle null sein.
[`matrix`](/de/docs/Web/API/SVGTransform/matrix) [`DOMMatrix`](/de/docs/Web/API/DOMMatrix)

Die Matrix, die diese Transformation darstellt. Das Matrixobjekt ist live, was bedeutet, dass alle Änderungen am SVGTransform-Objekt sofort im Matrixobjekt reflektiert werden und umgekehrt. Wenn das Matrixobjekt direkt geändert wird (d.h. ohne Verwendung der Methoden der SVGTransform-Schnittstelle selbst), ändert sich der Typ des SVGTransform in SVG_TRANSFORM_MATRIX.

  • Für SVG_TRANSFORM_MATRIX enthält die Matrix die a-, b-, c-, d-, e- und f-Werte, die vom Benutzer bereitgestellt wurden.
  • Für SVG_TRANSFORM_TRANSLATE repräsentieren e und f die Übersetzungsmengen (a=1, b=0, c=0 und d=1).
  • Für SVG_TRANSFORM_SCALE repräsentieren a und d die Skalierungsmengen (b=0, c=0, e=0 und f=0).
  • Für SVG_TRANSFORM_SKEWX und SVG_TRANSFORM_SKEWY repräsentieren a, b, c und d die Matrix, die zur angegebenen Schrägstellung führt (e=0 und f=0).
  • Für SVG_TRANSFORM_ROTATE repräsentieren a, b, c, d, e und f zusammen die Matrix, die zur angegebenen Rotation führt. Wenn die Rotation um den Mittelpunkt (0, 0) erfolgt, sind e und f null.

Instanz-Methoden

Name & Argumente Rückgabe Beschreibung
[`setMatrix`](/de/docs/Web/API/SVGTransform/setMatrix)(in [`DOMMatrix`](/de/docs/Web/API/DOMMatrix) matrix) void

Setzt den Transformations-Typ auf SVG_TRANSFORM_MATRIX, wobei die Parameter-Matrix die neue Transformation definiert. Beachten Sie, dass die Werte aus der Parameter-Matrix kopiert werden.

Ausnahmen:

  • Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NO_MODIFICATION_ALLOWED_ERR wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut zu ändern oder wenn das Objekt selbst schreibgeschützt ist.
[`setTranslate`](/de/docs/Web/API/SVGTransform/setTranslate)(in float tx, in float ty) void

Setzt den Transformations-Typ auf SVG_TRANSFORM_TRANSLATE, wobei die Parameter tx und ty die Übersetzungsmengen definieren.

Ausnahmen:

  • Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NO_MODIFICATION_ALLOWED_ERR wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut zu ändern oder wenn das Objekt selbst schreibgeschützt ist.
[`setScale`](/de/docs/Web/API/SVGTransform/setScale)(in float sx, in float sy) void

Setzt den Transformations-Typ auf SVG_TRANSFORM_SCALE, wobei die Parameter sx und sy die Skalierungsmengen definieren.

Ausnahmen:

  • Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NO_MODIFICATION_ALLOWED_ERR wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut zu ändern oder wenn das Objekt selbst schreibgeschützt ist.
[`setRotate`](/de/docs/Web/API/SVGTransform/setRotate)(in float angle, in float cx, in float cy) void

Setzt den Transformations-Typ auf SVG_TRANSFORM_ROTATE, wobei der Parameter angle den Rotationswinkel definiert und die Parameter cx und cy den optionalen Drehmittelpunkt definieren.

Ausnahmen:

  • Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NO_MODIFICATION_ALLOWED_ERR wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut zu ändern oder wenn das Objekt selbst schreibgeschützt ist.
[`setSkewX`](/de/docs/Web/API/SVGTransform/setSkewX)(in float angle) void

Setzt den Transformations-Typ auf SVG_TRANSFORM_SKEWX, wobei der Parameter angle die Menge der Schrägstellung definiert.

Ausnahmen:

  • Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NO_MODIFICATION_ALLOWED_ERR wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut zu ändern oder wenn das Objekt selbst schreibgeschützt ist.
[`setSkewY`](/de/docs/Web/API/SVGTransform/setSkewY)(in float angle) void

Setzt den Transformations-Typ auf SVG_TRANSFORM_SKEWY, wobei der Parameter angle die Menge der Schrägstellung definiert.

Ausnahmen:

  • Ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code NO_MODIFICATION_ALLOWED_ERR wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut zu ändern oder wenn das Objekt selbst schreibgeschützt ist.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGTransform

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
SVGTransform
angle
matrix
setMatrix
setRotate
setScale
setSkewX
setSkewY
setTranslate
type

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support