W3cubDocs

/Web APIs

DOMMatrix: setMatrixValue() 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⁩.

Note: This feature is available in Web Workers.

The setMatrixValue() method of the DOMMatrix interface replaces the contents of the matrix with the matrix described by the specified transform or transforms, returning itself.

Syntax

setMatrixValue(transformList)

Parameters

transformList: A string. Its value follows the same syntax as the CSS transform property value.

Return value

Returns itself; the DOMMatrix with updated values.

Examples

In this example, we create a matrix, apply a 3D transform using the DOMMatrix.translateSelf() method, revert it to a 2D transform using the setMatrixValue() method, then revert it back to a 3D transform with another setMatrixValue() method call.

const matrix = new DOMMatrix();

console.log(matrix.toString()); // matrix(1, 0, 0, 1, 0, 0)
console.log(matrix.is2D); // true

matrix.translateSelf(30, 40, 50);
console.log(matrix.toString()); // matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)
console.log(matrix.is2D); // false

matrix.setMatrixValue("matrix(1, 0, 0, 1, 15, 45)");
console.log(matrix.toString()); // output: matrix(1, 0, 0, 1, 15, 45)
console.log(matrix.is2D); // true

matrix.setMatrixValue(
  "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)",
);
console.log(matrix.toString()); // matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)
console.log(matrix.is2D); // false

Specifications

Specification
Geometry Interfaces Module Level 1> # dom-dommatrix-setmatrixvalue>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`setMatrixValue`	61	79	33	48	11	61	33	45	11	8.0	61	11