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 January 2020.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die flipX()
-Methode des DOMMatrixReadOnly
-Interfaces erstellt eine neue Matrix, die das Ergebnis der ursprünglichen Matrix ist, gespiegelt über die x-Achse. Dies ist gleichbedeutend mit der Multiplikation der Matrix mit DOMMatrix(-1, 0, 0, 1, 0, 0)
. Die ursprüngliche Matrix wird nicht verändert.
Syntax
flipX()
Rückgabewert
Gibt eine DOMMatrix
zurück.
Beispiele
Ein Dreieck invertieren
In diesem Beispiel enthält das SVG zwei Pfade in Form eines Dreiecks, die beide an derselben Position gezeichnet sind. Beachten Sie, dass die x-Koordinate des viewBox-Attributs negativ ist und 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
Der JavaScript-Code erstellt zunächst eine Identitätsmatrix und verwendet dann die flipX()
-Methode, um eine neue Matrix zu erstellen, die dann auf das blaue Dreieck angewendet wird, um es über die x-Achse zu spiegeln. Das rote Dreieck bleibt an seinem Platz.
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flipX() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support