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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Das SVGTransform-Interface spiegelt eine der Komponenten-Transformationen innerhalb einer SVGTransformList wider; daher 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, zu einer Ausnahme führen.

Instanz-Eigenschaften

type

Der Typ des Wertes, wie er durch eine der SVG_TRANSFORM_* Konstanten definiert ist, die in diesem Interface festgelegt sind.

angle

Der Winkel als Gleitkommawert. Ein Komfortattribut für SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX und SVG_TRANSFORM_SKEWY. Bei SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE und SVG_TRANSFORM_SCALE wird angle null sein.

matrix

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

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 zu diesem Typ zu wechseln.
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-Methoden

setMatrix()

Setzt den Transformationstyp auf SVG_TRANSFORM_MATRIX, wobei die Parameter der Matrix die neue Transformation definieren. Beachten Sie, dass die Werte aus dem Matrix-Parameter kopiert werden.

setTranslate()

Setzt den Transformationstyp auf SVG_TRANSFORM_TRANSLATE, wobei die Parameter tx und ty die Beträge der Verschiebung definieren.

setScale()

Setzt den Transformationstyp auf SVG_TRANSFORM_SCALE, wobei die Parameter sx und sy die Skalierungsbeträge definieren.

setRotate()

Setzt den Transformationstyp auf SVG_TRANSFORM_ROTATE, wobei der Parameter angle den Rotationswinkel definiert und die Parameter cx und cy das optionale Rotationszentrum definieren.

setSkewX()

Setzt den Transformationstyp auf SVG_TRANSFORM_SKEWX, wobei der Parameter angle das Maß der Verzerrung definiert.

setSkewY()

Setzt den Transformationstyp auf SVG_TRANSFORM_SKEWY, wobei der Parameter angle das Maß der Verzerrung definiert.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGTransform

Browser-Kompatibilität