DOMMatrixReadOnly: flipX() 方法

DOMMatrixReadOnly 接口的 flipX() 方法创建一个新的矩阵，该矩阵是原始矩阵围绕 x 轴翻转的结果。

语法

js
  DOMMatrixReadOnly.flipX()

返回值

返回一个 DOMMatrix，它包含一个新的矩阵，该矩阵是原始矩阵围绕 x 轴翻转的结果，这等效于将矩阵乘以 DOMMatrix(-1, 0, 0, 1, 0, 0)。原始矩阵不会被修改。

示例

反转三角形

在本例中，SVG 包含两个三角形形状的路径，两者都绘制到相同的位置。请注意，viewBox 属性的 x 坐标为负数，显示了我们 x 轴两侧的内容。

JavaScript 首先创建一个单位矩阵，然后使用 flipX() 方法创建一个新矩阵，然后将其应用于蓝色三角形，使其在 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

js
const flipped = document.getElementById("flipped");
const matrix = new DOMMatrixReadOnly();
const flippedMatrix = matrix.flipX();
flipped.setAttribute("transform", flippedMatrix.toString());

结果

规范

规范
几何接口模块级别 1
# dom-dommatrixreadonly-flipx

浏览器兼容性

BCD 表格仅在浏览器中加载