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
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
<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.
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flipY() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support