DOMMatrixReadOnly: flipY()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die flipY()-Methode der DOMMatrixReadOnly-Schnittstelle erstellt eine neue Matrix, die das Ergebnis der ursprünglichen Matrix ist, die um die y-Achse gespiegelt wird. Dies entspricht der Multiplikation der Matrix mit DOMMatrix(1, 0, 0, -1, 0, 0). Die ursprüngliche Matrix wird nicht verändert.

Syntax

js
flipY()

Rückgabewert

Eine DOMMatrix.

Beispiele

Spiegeln eines Dreiecks

In diesem Beispiel enthält das SVG zwei identische Pfade in Form eines Dreiecks; sie sind beide so gezeichnet, dass sie die gleiche Größe und Position haben. Die Viewbox hat einen negativen y-Wert, der uns Inhalt von beiden Seiten der y-Achse zeigt. Dies ermöglicht es, dass das gespiegelte Dreieck nach der Transformation im Ansichtsfenster bleibt.

HTML

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

Das JavaScript erstellt eine Identitätsmatrix, verwendet dann die flipY()-Methode, um eine neue Matrix zu erzeugen, die dann auf das blaue Dreieck angewendet wird, um es über die y-Achse zu spiegeln. Das rote Dreieck bleibt unverändert.

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

Ergebnis

Spezifikationen

Specification
Geometry Interfaces Module Level 1
# dom-dommatrixreadonly-flipy

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch