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 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 bezeichnet werden, was bedeutet, dass Versuche, das Objekt zu ändern, eine Ausnahme auslösen.

Überblick über die Schnittstelle

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 (2. Auflage)

Konstanten

Name	Wert	Beschreibung
`SVG_TRANSFORM_UNKNOWN`	0	Der Einheitentyp ist nicht einer der vordefinierten Einheitentypen. Es ist ungültig, zu versuchen, einen neuen Wert dieses Typs zu definieren oder einen bestehenden Wert in 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

Instanzeigenschaften

Name Typ Beschreibung

type unsigned short Der Typ des Wertes, wie durch eine der SVG_TRANSFORM_* Konstanten definiert, die auf dieser Schnittstelle definiert sind.

angle float Ein Komfortattribut für SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX und SVG_TRANSFORM_SKEWY. Es enthält den angegebenen Winkel.

Für SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE und SVG_TRANSFORM_SCALE ist angle null.

Name	Typ	Beschreibung
`type`	unsigned short	Der Typ des Wertes, wie durch eine der SVG_TRANSFORM_* Konstanten definiert, die auf dieser Schnittstelle definiert sind.
`angle`	float	Ein Komfortattribut für `SVG_TRANSFORM_ROTATE`, `SVG_TRANSFORM_SKEWX` und `SVG_TRANSFORM_SKEWY`. Es enthält den angegebenen Winkel. Für `SVG_TRANSFORM_MATRIX`, `SVG_TRANSFORM_TRANSLATE` und `SVG_TRANSFORM_SCALE` ist `angle` null.
`matrix`	[`DOMMatrix`](/de/docs/Web/API/DOMMatrix)	Die Matrix, die diese Transformation darstellt. Das Matrixobjekt ist live, was bedeutet, dass alle Änderungen, die am `SVGTransform`-Objekt vorgenommen werden, sofort im Matrixobjekt widergespiegelt werden und umgekehrt. Falls das Matrixobjekt direkt geändert wird (d. h. ohne die Methoden des `SVGTransform`-Schnittstelle zu verwenden), ändert sich der Typ des `SVGTransform` zu `SVG_TRANSFORM_MATRIX`. Für `SVG_TRANSFORM_MATRIX` enthält die Matrix die a, b, c, d, e, f Werte, die vom Benutzer vorgegeben wurden. Für `SVG_TRANSFORM_TRANSLATE` repräsentieren e und f die Übersetzungsbeträge (a=1, b=0, c=0 und d=1). Für `SVG_TRANSFORM_SCALE` repräsentieren a und d die Skalierungsbeträge (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 Verschiebung 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 Drehung führt. Ist die Drehung um den Mittelpunkt (0, 0), sind e und f null.

matrix

[`DOMMatrix`](/de/docs/Web/API/DOMMatrix)

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

Für SVG_TRANSFORM_MATRIX enthält die Matrix die a, b, c, d, e, f Werte, die vom Benutzer vorgegeben wurden.
Für SVG_TRANSFORM_TRANSLATE repräsentieren e und f die Übersetzungsbeträge (a=1, b=0, c=0 und d=1).
Für SVG_TRANSFORM_SCALE repräsentieren a und d die Skalierungsbeträge (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 Verschiebung 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 Drehung führt. Ist die Drehung um den Mittelpunkt (0, 0), sind e und f null.

Instanzmethoden

Name & Argumente	Rückgabewert	Beschreibung
setMatrix(in [`DOMMatrix`](/de/docs/Web/API/DOMMatrix) matrix)	void	Setzt den Transformationstyp auf `SVG_TRANSFORM_MATRIX`, wobei der Parameter matrix die neue Transformation definiert. Beachten Sie, dass die Werte vom Parameter `matrix` kopiert werden. Ausnahmen: Eine [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut oder das Objekt selbst zu ändern.
`setTranslate(in float tx, in float ty)`	void	Setzt den Transformationstyp auf `SVG_TRANSFORM_TRANSLATE`, wobei die Parameter `tx` und `ty` die Übersetzungsbeträge definieren. Ausnahmen: Eine [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut oder das Objekt selbst zu ändern.
`setScale(in float sx, in float sy)`	void	Setzt den Transformationstyp auf `SVG_TRANSFORM_SCALE`, wobei die Parameter `sx` und `sy` die Skalierungsbeträge definieren. Ausnahmen: Eine [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut oder das Objekt selbst zu ändern.
`setRotate(in float angle, in float cx, in float cy)`	void	Setzt den Transformationstyp auf `SVG_TRANSFORM_ROTATE`, wobei der Parameter `angle` den Drehwinkel definiert und die Parameter `cx` und `cy` das optionale Drehzentrum definieren. Ausnahmen: Eine [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut oder das Objekt selbst zu ändern.
`setSkewX(in float angle)`	void	Setzt den Transformationstyp auf `SVG_TRANSFORM_SKEWX`, wobei der Parameter `angle` die Verschiebungsmenge definiert. Ausnahmen: Eine [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut oder das Objekt selbst zu ändern.
`setSkewY(in float angle)`	void	Setzt den Transformationstyp auf `SVG_TRANSFORM_SKEWY`, wobei der Parameter `angle` die Verschiebungsmenge definiert. Ausnahmen: Eine [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn versucht wird, ein schreibgeschütztes Attribut oder das Objekt selbst zu ändern.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGTransform

Browser-Kompatibilität

BCD tables only load in the browser