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