SVGTransform: setTranslate() メソッド

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.

setTranslate() は SVGTransform インターフェイスのメソッドで、メソッドは座標変換の種類を SVG_TRANSFORM_TRANSLATE に設定し、引数 tx と ty で移動量を定義します。

構文

setTranslate(tx, ty)

引数

tx: 浮動小数点数で、 X 軸方向の移動量を定義します。
ty: 浮動小数点数で、 Y 軸方向の移動量を定義します。

返値

なし (undefined)。

例外

NoModificationAllowedError DOMException: 属性または SVGTransform オブジェクトが読み取り専用であった場合に発生します。

例

移動量の値を設定

// SVG 要素を選択し、座標変換オブジェクトを作成
const svgElement = document.querySelector("svg");
const transform = svgElement.createSVGTransform();

// 座標変換の移動値を設定
transform.setTranslate(100, 50);

// 移動の詳細を出力
console.log(`X の移動量: ${transform.matrix.e}`); // 出力: 100
console.log(`Y の移動量: ${transform.matrix.f}`); // 出力: 50

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # __svg__SVGTransform__setTranslate