DOMMatrixReadOnly：flipY() 方法
注意：此功能在 Web Workers 中可用。
DOMMatrixReadOnly 介面的 flipY() 方法建立一個新的矩陣，該矩陣是原始矩陣圍繞 y 軸翻轉的結果。這相當於將矩陣乘以 DOMMatrix(1, 0, 0, -1, 0, 0)。原始矩陣不會被修改。
語法
js
flipY()
引數
無。
返回值
一個 DOMMatrix。
示例
翻轉三角形
在此示例中，SVG 包含兩個相同的三角形形狀的 路徑；它們的繪製大小和位置相同。檢視框具有負 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());
結果
規範
| 規範 |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-flipy |
瀏覽器相容性
載入中…