DOMMatrixReadOnly: flipX()-Methode
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die flipX()
-Methode der DOMMatrixReadOnly
-Schnittstelle erstellt eine neue Matrix, die das Ergebnis der ursprünglichen Matrix ist, gespiegelt an der x-Achse.
Syntax
DOMMatrixReadOnly.flipX()
Rückgabewert
Gibt eine DOMMatrix
zurück, die eine neue Matrix enthält, die das Ergebnis der ursprünglichen Matrix ist, gespiegelt an der x-Achse, was dem Multiplizieren der Matrix mit DOMMatrix(-1, 0, 0, 1, 0, 0)
entspricht. Die ursprüngliche Matrix wird nicht verändert.
Beispiele
Invertieren eines Dreiecks
In diesem Beispiel enthält das SVG zwei Pfade in Form eines Dreiecks, die beide an die gleiche Position gezeichnet werden. Beachten Sie, dass die x-Koordinate des viewBox
-Attributs negativ ist, was uns den Inhalt von beiden Seiten der x-Achse zeigt.
JavaScript erstellt zuerst eine Identitätsmatrix und verwendet dann die flipX()
-Methode, um eine neue Matrix zu erstellen, die dann auf das blaue Dreieck angewendet wird, wodurch es entlang der x-Achse invertiert wird. Das rote Dreieck bleibt an Ort und Stelle.
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
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
BCD tables only load in the browser