SVGTransform

The SVGTransform interface reflects one of the component transformations within an SVGTransformList; thus, an SVGTransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute.

MDN Reference

Methods

setMatrix()

setMatrix(matrix?): void;

The setMatrix() method of the SVGTransform interface sets the transform type to SVG_TRANSFORM_MATRIX, with parameter matrix defining the new transformation.

MDN Reference

Parameters

Parameter	Type
matrix?	DOMMatrix2DInit

Returns

void

---

setRotate()

setRotate(
   angle, 
   cx, 
   cy
): void;

The setRotate() method of the SVGTransform interface sets the transform type to SVG_TRANSFORM_ROTATE, with parameter angle defining the rotation angle and parameters cx and cy defining the optional center of rotation.

MDN Reference

Parameters

Parameter	Type
angle	number
cx	number
cy	number

Returns

void

---

setScale()

setScale(sx, sy): void;

The setScale() method of the SVGTransform interface sets the transform type to SVG_TRANSFORM_SCALE, with parameters sx and sy defining the scale amounts.

MDN Reference

Parameters

Parameter	Type
sx	number
sy	number

Returns

void

---

setSkewX()

setSkewX(angle): void;

The setSkewX() method of the SVGTransform interface sets the transform type to SVG_TRANSFORM_SKEWX, with parameter angle defining the amount of skew along the X-axis.

MDN Reference

Parameters

Parameter	Type
angle	number

Returns

void

---

setSkewY()

setSkewY(angle): void;

The setSkewY() method of the SVGTransform interface sets the transform type to SVG_TRANSFORM_SKEWY, with parameter angle defining the amount of skew along the Y-axis.

MDN Reference

Parameters

Parameter	Type
angle	number

Returns

void

---

setTranslate()

setTranslate(tx, ty): void;

The setTranslate() method of the SVGTransform interface sets the transform type to SVG_TRANSFORM_TRANSLATE, with parameters tx and ty defining the translation amounts.

MDN Reference

Parameters

Parameter	Type
tx	number
ty	number

Returns

void

Properties

angle

readonly angle: number;

The angle read-only property of the SVGTransform interface represents the angle of the transformation in degrees.

MDN Reference

---

matrix

readonly matrix: DOMMatrix;

The matrix read-only property of the SVGTransform interface represents the transformation matrix that corresponds to the transformation type.

MDN Reference

---

SVG_TRANSFORM_MATRIX

readonly SVG_TRANSFORM_MATRIX: 1;

---

SVG_TRANSFORM_ROTATE

readonly SVG_TRANSFORM_ROTATE: 4;

---

SVG_TRANSFORM_SCALE

readonly SVG_TRANSFORM_SCALE: 3;

---

SVG_TRANSFORM_SKEWX

readonly SVG_TRANSFORM_SKEWX: 5;

---

SVG_TRANSFORM_SKEWY

readonly SVG_TRANSFORM_SKEWY: 6;

---

SVG_TRANSFORM_TRANSLATE

readonly SVG_TRANSFORM_TRANSLATE: 2;

---

SVG_TRANSFORM_UNKNOWN

readonly SVG_TRANSFORM_UNKNOWN: 0;

---

type

readonly type: number;

The type read-only property of the SVGTransform interface represents the type of transformation applied, specified by one of the SVG_TRANSFORM_* constants defined on this interface.

MDN Reference