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

js
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

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.

js
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flipX()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch