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 |
浏览器兼容性
加载中…