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
transformproperty 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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
setMatrixValue
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
DOMMatrix.translateSelf()DOMMatrixReadOnly.is2D- CSS
matrix()function - CSS
matrix3d()function