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, gespiegelt entlang der y-Achse. Dies ist gleichbedeutend mit der Multiplikation der Matrix durch DOMMatrix(1, 0, 0, -1, 0, 0). Die ursprüngliche Matrix wird nicht verändert.
Syntax
DOMMatrixReadOnly.flipY()
Rückgabewert
Eine DOMMatrix.
Beispiele
Spiegeln eines Dreiecks
In diesem Beispiel enthält das SVG zwei identische Pfad-Elemente in der Form eines Dreiecks; sie sind beide so gezeichnet, dass sie die gleiche Größe und Position haben. Der viewBox hat einen negativen y-Wert, der uns Inhalte von beiden Seiten der y-Achse zeigt. Dies ermöglicht es, dass das gespiegelte Dreieck nach der Transformation im Ansichtsbereich 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
Das JavaScript erstellt eine Identitätsmatrix und verwendet dann die flipY()-Methode, um eine neue Matrix zu erstellen, die dann auf das blaue Dreieck angewendet wird, wobei es entlang der y-Achse gespiegelt wird. 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 |
Browser-Kompatibilität
BCD tables only load in the browser