DOMMatrixReadOnly: flipY()-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 flipY()-Methode der DOMMatrixReadOnly-Schnittstelle erstellt eine neue Matrix, die das Ergebnis der ursprünglichen Matrix ist, die um die y-Achse gespiegelt wird. Dies entspricht der Multiplikation der Matrix mit DOMMatrix(1, 0, 0, -1, 0, 0). Die ursprüngliche Matrix wird nicht verändert.

Syntax

js
flipY()

Rückgabewert

Eine DOMMatrix.

Beispiele

Spiegeln eines Dreiecks

In diesem Beispiel enthält das SVG zwei identische Pfade in Form eines Dreiecks; sie sind beide so gezeichnet, dass sie die gleiche Größe und Position haben. Die Viewbox hat einen negativen y-Wert, der uns Inhalt von beiden Seiten der y-Achse zeigt. Dies ermöglicht es, dass das gespiegelte Dreieck nach der Transformation im Ansichtsfenster bleibt.

HTML

html
<svg height="200" width="100" viewBox="0 -100 100 200">
  <path fill="red" d="M 0 0 L 100 0 L 50 100 Z" />
  <path fill="blue" d="M 0 0 L 100 0 L 50 100 Z" id="flipped" />
</svg>

JavaScript

Das JavaScript erstellt eine Identitätsmatrix, verwendet dann die flipY()-Methode, um eine neue Matrix zu erzeugen, die dann auf das blaue Dreieck angewendet wird, um es über die y-Achse zu spiegeln. Das rote Dreieck bleibt unverändert.

js
const flipped = document.getElementById("flipped");
const matrix = new DOMMatrix();
const flippedMatrix = matrix.flipY();
flipped.setAttribute("transform", flippedMatrix.toString());

Ergebnis

Spezifikationen

Specification
Geometry Interfaces Module Level 1
# dom-dommatrixreadonly-flipy

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
flipY()

Legend

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

Full support
Full support

Siehe auch