DOMMatrixReadOnly: flipY() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
メモ: この機能はウェブワーカー内で利用可能です。
flipY() は DOMMatrixReadOnly インターフェイスのメソッドで、元の行列を Y 軸で反転させた新しい行列を作成します。この操作は行列を DOMMatrix(1, 0, 0, -1, 0, 0) で乗算するのと同じです。元の行列は変更されません。
構文
js
flipY()
引数
なし。
返値
DOMMatrix です。
例
三角形の反転
この例では、SVG には三角形 2 つの同一のパスが含まれています。これらは同じサイズと位置で描画されます。ビューボックスの y 値は負の値を持ち、y 軸の両側のコンテンツを表示させます。これにより、反転した三角形は座標変換後にビューポート内に収まるようになります。
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
この JavaScript は恒等行列を作成し、次に flipY() メソッドを使って新しい行列を作成し、それを青い三角形に用いて Y 軸を反転させています。赤い三角形はその場に残ります。
js
const flipped = document.getElementById("flipped");
const matrix = new DOMMatrix();
const flippedMatrix = matrix.flipY();
flipped.setAttribute("transform", flippedMatrix.toString());
結果
仕様書
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-flipy |