DOMMatrixReadOnly: flipX()-Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die flipX()-Methode des DOMMatrixReadOnly-Interfaces erzeugt eine neue Matrix, die das Ergebnis der ursprünglichen Matrix ist, die um die x-Achse gespiegelt wird. Dies entspricht der Multiplikation der Matrix mit DOMMatrix(-1, 0, 0, 1, 0, 0). Die ursprüngliche Matrix wird dabei nicht verändert.
Syntax
flipX()
Parameter
Keine.
Rückgabewert
Gibt eine DOMMatrix zurück.
Beispiele
Invertierung eines Dreiecks
In diesem Beispiel enthält das SVG zwei Pfade in Form eines Dreiecks, die beide an die gleiche Position gezeichnet sind. Beachten Sie, dass die x-Koordinate des viewBox-Attributs negativ ist, was uns Inhalte von beiden Seiten der x-Achse zeigt.
HTML
<svg width="100" height="100" viewBox="-50 0 100 100">
<path fill="red" d="M 0 50 L 50 0 L 50 100 Z" />
<path id="flipped" fill="blue" d="M 0 50 L 50 0 L 50 100 Z" />
</svg>
JavaScript
Das JavaScript erstellt zunächst eine Identitätsmatrix, verwendet dann die flipX()-Methode, um eine neue Matrix zu erzeugen, welche dann auf das blaue Dreieck angewendet wird, um es entlang der x-Achse zu invertieren. Das rote Dreieck bleibt an Ort und Stelle.
const flipped = document.getElementById("flipped");
const matrix = new DOMMatrixReadOnly();
const flippedMatrix = matrix.flipX();
flipped.setAttribute("transform", flippedMatrix.toString());
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-flipx |