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

BCD tables only load in the browser

See also