DOMMatrixReadOnly.translate()

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The translate() method of the DOMMatrixReadOnly interface creates a new matrix being the result of the original matrix with a translation applied.

Syntax

The translate() method accepts two or three values.

DOMMatrix.translate(translateX, translateY[, translateZ])

Parameters

translateX
A number representing the abscissa (x-coordinate) of the translating vector.
translateY
A number representing the ordinate (y-coordinate) of the translating vector.
translateZ Optional
A 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.

Return value

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.

Examples

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());
ScreenshotLive sample

Specifications

Specification Status Comment
Geometry Interfaces Module Level 1
The definition of 'DOMMatrixReadOnly.translate()' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
translate()Chrome Full support 45Edge Full support 79Firefox Full support 33IE No support NoOpera Full support 32Safari Full support 11WebView Android Full support 61Chrome Android Full support 45Firefox Android Full support 33Opera Android Full support 45Safari iOS Full support 11.3Samsung Internet Android Full support 8.0

Legend

Full support  
Full support
No support  
No support