W3cubDocs

/Web APIs

SVGTransform: setTranslate() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The setTranslate() method of the SVGTransform interface sets the transform type to SVG_TRANSFORM_TRANSLATE, with parameters tx and ty defining the translation amounts.

Syntax

setTranslate(tx, ty)

Parameters

tx

A float defining the translation amount along the X-axis.

ty

A float defining the translation amount along the Y-axis.

Return value

None (undefined).

Exceptions

NoModificationAllowedError DOMException

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

Examples

>

Setting Translation Values

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

// Set the translation values for the transform
transform.setTranslate(100, 50);

// Output the translation details
console.log(`X Translation:  ${transform.matrix.e}`); // Output: 100
console.log(`Y Translation: ${transform.matrix.f}`); // Output: 50

Specifications

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
setTranslate 1 12 1.5 ≤12.1 4 18 4 ≤12.1 3.2 1.0 4.4 3.2

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform/setTranslate