DOMMatrixReadOnly：flipX() 方法
注意：此功能在 Web Workers 中可用。
flipX() 方法是 DOMMatrixReadOnly 介面的一部分，它建立一個新的矩陣，該矩陣是原始矩陣圍繞 x 軸翻轉的結果。這相當於將矩陣乘以 DOMMatrix(-1, 0, 0, 1, 0, 0)。原始矩陣不會被修改。
語法
js
flipX()
引數
無。
返回值
返回一個 DOMMatrix。
示例
翻轉三角形
在這個示例中，SVG 包含兩個三角形形狀的路徑，它們都繪製在相同的位置。請注意，viewBox 屬性的 x 座標是負數，這向我們展示了 x 軸兩側的內容。
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
JavaScript 首先建立一個單位矩陣，然後使用 flipX() 方法建立一個新矩陣，該矩陣應用於藍色三角形，使其繞 x 軸翻轉。紅色三角形保持不變。
js
const flipped = document.getElementById("flipped");
const matrix = new DOMMatrixReadOnly();
const flippedMatrix = matrix.flipX();
flipped.setAttribute("transform", flippedMatrix.toString());
結果
規範
| 規範 |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-flipx |
瀏覽器相容性
載入中…