DOMMatrixReadOnly: translate() メソッド

translateX

平行移動させるベクトルの横軸（x 座標）を表す数値です。

translateY

平行移動させるベクトルの縦軸（y 座標）を表す数値です。

translateZ 省略可

平行移動させるベクトルの z 成分を表す数値です。指定されなかった場合の既定値は 0 になります。 0 以外の数値であった場合、結果の行列は 3D になります。

行列を指定されたベクトルで平行移動させた結果の新しい行列を格納した DOMMatrix を返します．元の行列は変更されません．

平行移動が Z 軸について適用された場合、結果の行列は 4x4 の 3D 行列になります。

この SVG には赤と青の 2 つの正方形が格納されており、それぞれが文書の原点に配置されています。

<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>

以下の JavaScript では、まず単位行列を作成し、次に translate() メソッドを使用して新しい変換行列を作成し、それを transform として青い正方形に適用しています。赤い正方形はそのままの位置に配置されます。

const matrix = new DOMMatrixReadOnly().translate(25, 25);

document
  .querySelector("#transformed")
  .setAttribute("transform", matrix.toString());