DOMMatrixReadOnly: метод flipX()

Метод flipX() интерфейса DOMMatrixReadOnly создаёт новую матрицу, являющуюся результатом отражения исходной матрицы относительно оси x. Это эквивалентно умножению матрицы на DOMMatrix(-1, 0, 0, 1, 0, 0). Исходная матрица не изменяется.

Возвращает DOMMatrix.

В этом примере SVG содержит две фигуры в виде треугольника, обе нарисованы в одном положении. Обратите внимание, что координата x атрибута viewBox отрицательна, что показывает содержимое с обеих сторон оси x.

HTML

<svg width="100" height="100" viewBox="-50 0 100 100">
  <path fill="red" d="M 0 50 L 50 0 L 50 100 Z" />
  <path id="flipped" fill="blue" d="M 0 50 L 50 0 L 50 100 Z" />
</svg>

JavaScript

В JavaScript сначала создаётся единичная матрица, затем используется метод flipX() для создания новой матрицы, которая затем применяется к синему треугольнику, отражая его относительно оси x. Красный треугольник остаётся на месте.

const flipped = document.getElementById("flipped");
const matrix = new DOMMatrixReadOnly();
const flippedMatrix = matrix.flipX();
flipped.setAttribute("transform", flippedMatrix.toString());

Результат

• DOMMatrixReadOnly.flipY()