DOMMatrixReadOnly: метод translate()

Метод translate() интерфейса DOMMatrixReadOnly создаёт новую матрицу, являющуюся результатом применения трансляции к исходной матрице.

translateX

Число, представляющее абсциссу (координату x) вектора трансляции.

translateY

Число, представляющее ординату (координату y) вектора трансляции.

translateZ Необязательно

Число, представляющее z-компоненту вектора трансляции. Если не указано, по умолчанию равно 0. Если это значение отлично от 0, результирующая матрица будет 3D.

Возвращает DOMMatrix с новой матрицей, являющейся результатом трансляции исходной матрицы на заданный вектор. Исходная матрица не изменяется.

Если трансляция применяется по оси z, результирующая матрица будет 4x4 3D матрицей.

Этот SVG содержит два квадрата, один красный и один синий, каждый из которых расположен в начале координат документа:

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