SVGSVGElement: createSVGTransformFromMatrix() method

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.

The createSVGTransformFromMatrix() method of the SVGSVGElement interface creates an SVGTransform object outside of any document trees, based on the given DOMMatrix object.

Syntax

js
createSVGTransformFromMatrix(matrix)

Parameters

matrix

A DOMMatrix object representing the initial matrix for the transform.

Return value

An SVGTransform object, initialized to the given matrix transform. It is a matrix() transform if the matrix is 2D, and a matrix3d() transform otherwise.

Examples

Creating a Transform from a Matrix

html
<svg id="exampleSVG" width="200" height="200">
  <rect id="exampleRect" x="50" y="50" width="100" height="50" fill="blue" />
</svg>
js
const svgElement = document.getElementById("exampleSVG");
const rectElement = document.getElementById("exampleRect");

// Create a new matrix
const matrix = svgElement.createSVGMatrix();
matrix.a = 1; // Scale x
matrix.d = 1; // Scale y
matrix.e = 50; // Translate x
matrix.f = 50; // Translate y

// Create a new SVGTransform from the matrix
const transform = svgElement.createSVGTransformFromMatrix(matrix);

// Apply the transform to the rectangle
rectElement.transform.baseVal.appendItem(transform);

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGSVGElement__createSVGTransformFromMatrix

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createSVGTransformFromMatrix

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also