SVGTransform

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

TheSVGTransform interface reflects one of the component transformations within anSVGTransformList; thus, anSVGTransform object corresponds to a single component (e.g.,scale(…) ormatrix(…)) within atransform attribute.

AnSVGTransform object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.

Instance properties

type: The type of the value as specified by one of theSVG_TRANSFORM_* constants defined on this interface.
angle: The angle as a floating point value. A convenience attribute forSVG_TRANSFORM_ROTATE,SVG_TRANSFORM_SKEWX andSVG_TRANSFORM_SKEWY. ForSVG_TRANSFORM_MATRIX,SVG_TRANSFORM_TRANSLATE andSVG_TRANSFORM_SCALE,angle will be zero.
matrix: The matrix as aDOMMatrix that represents this transformation. The matrix object is live, meaning that any changes made to theSVGTransform object are immediately reflected in the matrix object and vice versa. In case the matrix object is changed directly (i.e., without using the methods on theSVGTransform interface itself) then the type of theSVGTransform changes toSVG_TRANSFORM_MATRIX.

Instance methods

setMatrix(): Sets the transform type toSVG_TRANSFORM_MATRIX, with parameter matrix defining the new transformation. Note that the values from the parametermatrix are copied.
setTranslate(): Sets the transform type toSVG_TRANSFORM_TRANSLATE, with parameterstx andty defining the translation amounts.
setScale(): Sets the transform type toSVG_TRANSFORM_SCALE, with parameterssx andsy defining the scale amounts.
setRotate(): Sets the transform type toSVG_TRANSFORM_ROTATE, with parameterangle defining the rotation angle and parameterscx andcy defining the optional center of rotation.
setSkewX(): Sets the transform type toSVG_TRANSFORM_SKEWX, with parameterangle defining the amount of skew.
setSkewY(): Sets the transform type toSVG_TRANSFORM_SKEWY, with parameterangle defining the amount of skew.

Static properties

SVG_TRANSFORM_UNKNOWN (0): The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_TRANSFORM_MATRIX (1): Amatrix(…) transformation.
SVG_TRANSFORM_TRANSLATE (2): Atranslate(…) transformation.
SVG_TRANSFORM_SCALE (3): Ascale(…) transformation.
SVG_TRANSFORM_ROTATE (4): Arotate(…) transformation.
SVG_TRANSFORM_SKEWX (5): Askewx(…) transformation.
SVG_TRANSFORM_SKEWY (6): Askewy(…) transformation.