Note: This feature is available in Web Workers.
The translate() method of the DOMMatrixReadOnly interface creates a new matrix being the result of the original matrix with a translation applied.
translate(translateX, translateY)
translate(translateX, translateY, translateZ)translateXA number representing the abscissa (x-coordinate) of the translating vector.
translateYA number representing the ordinate (y-coordinate) of the translating vector.
translateZ OptionalA number representing the z component of the translating vector. If not supplied, this defaults to 0. If this is anything other than 0, the resulting matrix will be 3D.
Returns a DOMMatrix containing a new matrix being the result of the matrix being translated by the given vector. The original matrix is not modified.
If a translation is applied about the z-axis, the resulting matrix will be a 4x4 3D matrix.
This SVG contains two squares, one red and one blue, each positioned at the document origin:
<svg width="250" height="250" viewBox="0 0 50 50">
<rect width="25" height="25" fill="red" />
<rect id="transformed" width="25" height="25" fill="blue" />
</svg>The following JavaScript first creates an identity matrix, then uses the translate() method to create a new, translated matrix — which is then applied to the blue square as a transform. The red square is left in place.
const matrix = new DOMMatrixReadOnly().translate(25, 25);
document
.querySelector("#transformed")
.setAttribute("transform", matrix.toString());