SVGTransform: setMatrix() method - Web APIs | MDN

Syntax

Parameters

matrix

A live DOMMatrix object defining the new transformation matrix to apply.

Return value

None (undefined).

Exceptions

NoModificationAllowedError DOMException

Thrown if the attribute or the SVGTransform object is read-only.

Examples

Setting a Transformation Matrix

js

// Get an SVG element and create a transform object
const svgElement = document.querySelector("svg");
const transform = svgElement.createSVGTransform();

// Create a DOMMatrix with specific values
const matrix = new DOMMatrix();
matrix.a = 1; // Scale X
matrix.d = 1; // Scale Y
matrix.e = 50; // Translate X
matrix.f = 50; // Translate Y

// Set the transform to the new matrix
transform.setMatrix(matrix);

console.dir(transform.matrix); // Output: SVGMatrix { a: 1, b: 0, c: 0, d: 1, e: 50, f: 50 }

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGTransform__setMatrix

Browser compatibility

See Also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.