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.

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.

[`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

BCD tables only load in the browser