DOMMatrixReadOnly: метод flipY()

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

Объект DOMMatrix.

В этом примере SVG содержит два одинаковых пути в форме треугольника; оба имеют одинаковый размер и положение. Область просмотра (viewbox) имеет отрицательное значение Y, отображая содержимое с обеих сторон оси Y. Это позволяет отобразить перевёрнутый треугольник в пределах области просмотра после преобразования.

HTML

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

JavaScript

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

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

Результат

• DOMMatrixReadOnly.flipX()