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 als Ergebnis der ursprünglichen Matrix, die an der y-Achse gespiegelt wird. Dies ist gleichbedeutend mit der Multiplikation der Matrix mit DOMMatrix(1, 0, 0, -1, 0, 0). Die ursprüngliche Matrix wird nicht verändert.
Syntax
flipY()
Parameter
Keine.
Rückgabewert
Eine DOMMatrix.
Beispiele
Invertieren 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. Das Ansichtsfenster hat einen negativen y-Wert, der Inhalte von beiden Seiten der y-Achse zeigt. Dies ermöglicht es, dass das gespiegelte Dreieck nach der Transformation innerhalb des Ansichtsbereichs bleibt.
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
Der JavaScript-Code erstellt eine Identitätsmatrix, verwendet dann die flipY()-Methode, um eine neue Matrix zu erstellen, die anschließend auf das blaue Dreieck angewendet wird und es entlang der y-Achse invertiert. Das rote Dreieck bleibt unverändert.
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 |