DOMMatrixReadOnly: flipX()-Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
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
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-flipx |
Browser-Kompatibilität
Loading…