DOMMatrixReadOnly: `translate()` Methode

translateX

Eine Zahl, die die Abszisse (x-Koordinate) des Translationsvektors darstellt.

translateY

Eine Zahl, die die Ordinate (y-Koordinate) des Translationsvektors darstellt.

translateZ Optional

Eine Zahl, die die z-Komponente des Translationsvektors darstellt. Falls nicht angegeben, ist der Standardwert 0. Wenn dieser Wert ungleich 0 ist, wird die resultierende Matrix 3D sein.

Gibt eine DOMMatrix zurück, die eine neue Matrix enthält, die das Ergebnis der Matrix ist, die um den angegebenen Vektor übersetzt wurde. Die ursprüngliche Matrix wird nicht verändert.

Wenn eine Translation entlang der z-Achse angewendet wird, ist die resultierende Matrix eine 4x4 3D-Matrix.

Diese SVG enthält zwei Quadrate, eines rot und eines blau, die jeweils am Dokumentursprung positioniert sind:

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

Das folgende JavaScript erstellt zuerst eine Identitätsmatrix und verwendet dann die translate() Methode, um eine neue, übersetzte Matrix zu erstellen — die anschließend auf das blaue Quadrat als transform angewendet wird. Das rote Quadrat bleibt unverändert.

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

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