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.
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.
An SVGTransform 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 the
SVG_TRANSFORM_*constants defined on this interface. angle-
The angle as a floating point value. A convenience attribute for
SVG_TRANSFORM_ROTATE,SVG_TRANSFORM_SKEWXandSVG_TRANSFORM_SKEWY. ForSVG_TRANSFORM_MATRIX,SVG_TRANSFORM_TRANSLATEandSVG_TRANSFORM_SCALE,anglewill be zero. matrix-
The matrix as a
DOMMatrixthat represents this transformation. The matrix object is live, meaning that any changes made to theSVGTransformobject 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 theSVGTransforminterface itself) then the type of theSVGTransformchanges toSVG_TRANSFORM_MATRIX.
Instance methods
setMatrix()-
Sets the transform type to
SVG_TRANSFORM_MATRIX, with parameter matrix defining the new transformation. Note that the values from the parametermatrixare copied. setTranslate()-
Sets the transform type to
SVG_TRANSFORM_TRANSLATE, with parameterstxandtydefining the translation amounts. setScale()-
Sets the transform type to
SVG_TRANSFORM_SCALE, with parameterssxandsydefining the scale amounts. setRotate()-
Sets the transform type to
SVG_TRANSFORM_ROTATE, with parameterangledefining the rotation angle and parameterscxandcydefining the optional center of rotation. setSkewX()-
Sets the transform type to
SVG_TRANSFORM_SKEWX, with parameterangledefining the amount of skew. setSkewY()-
Sets the transform type to
SVG_TRANSFORM_SKEWY, with parameterangledefining 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)-
A
matrix(…)transformation. SVG_TRANSFORM_TRANSLATE(2)-
A
translate(…)transformation. SVG_TRANSFORM_SCALE(3)-
A
scale(…)transformation. SVG_TRANSFORM_ROTATE(4)-
A
rotate(…)transformation. SVG_TRANSFORM_SKEWX(5)-
A
skewx(…)transformation. SVG_TRANSFORM_SKEWY(6)-
A
skewy(…)transformation.
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGTransform |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
SVGTransform
|
|
|
|
|
|
|
|
|
|
|
|
|
angle
|
|
|
|
|
|
|
|
|
|
|
|
|
matrix
|
|
|
|
|
|
|
|
|
|
|
|
|
setMatrix
|
|
|
|
|
|
|
|
|
|
|
|
|
setRotate
|
|
|
|
|
|
|
|
|
|
|
|
|
setScale
|
|
|
|
|
|
|
|
|
|
|
|
|
setSkewX
|
|
|
|
|
|
|
|
|
|
|
|
|
setSkewY
|
|
|
|
|
|
|
|
|
|
|
|
|
setTranslate
|
|
|
|
|
|
|
|
|
|
|
|
|
type
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support