DOMMatrix

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

注意：此功能在 Web Workers 中可用。

DOMMatrix 接口表示 4x4 矩阵，适用于 2D 和 3D 操作，包括旋转和翻译。它是 DOMMatrixReadOnly 接口的可变版本。该接口在 Web Workers 中可用。

WebKitCSSMatrix 和 SVGMatrix 是 DOMMatrix 的别名。

构造函数

DOMMatrix(): 创建并返回一个新的 DOMMatrix 对象。

实例属性

此接口继承自 DOMMatrixReadOnly 的属性，但其中一些属性已修改为可变。

m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44

双精度浮点数值，表示 4x4 矩阵的每个分量，其中 m11 到 m14 是第一列，m21 到 m24 是第二列，以此类推。

a, b, c, d, e, f

双精度浮点数值，表示执行 2D 旋转和翻译所需的 4x4 矩阵的分量。它们是 4x4 矩阵特定分量的别名，如下所示。

`2D`	`3D 等效项`
`a`	`m11`
`b`	`m12`
`c`	`m21`
`d`	`m22`
`e`	`m41`
`f`	`m42`

实例方法

此接口包含以下方法，以及它从 DOMMatrixReadOnly 继承的方法。

DOMMatrix.invertSelf(): 通过求逆来修改矩阵。如果矩阵无法求逆，则其所有分量都设置为 NaN，并且 is2D 返回 false。
DOMMatrix.multiplySelf(): 通过将指定 DOMMatrix 后乘来修改矩阵。这等同于点积 A⋅B，其中矩阵 A 是源矩阵，B 是作为方法参数传入的矩阵。返回自身。
DOMMatrix.preMultiplySelf(): 通过将指定 DOMMatrix 前乘来修改矩阵。返回自身。
DOMMatrix.translateSelf(): 通过应用指定的向量来修改矩阵。默认向量为 [0, 0, 0]。返回自身。
DOMMatrix.scaleSelf(): 通过应用指定的缩放因子，并以指定原点为中心来修改矩阵。也返回自身。默认情况下，所有三个轴的缩放因子均为 1，原点为 (0, 0, 0)。返回自身。
DOMMatrix.scale3dSelf(): 通过将指定的缩放因子应用于所有三个轴，并以给定原点为中心来修改矩阵。返回自身。
DOMMatrix.rotateSelf(): 通过围绕每个轴以指定的度数进行旋转来修改矩阵。返回自身。
DOMMatrix.rotateAxisAngleSelf(): 通过围绕给定向量以指定角度进行旋转来修改矩阵。返回自身。
DOMMatrix.rotateFromVectorSelf(): 通过将矩阵旋转到指定向量与 (1, 0) 之间的角度来修改矩阵。返回自身。
DOMMatrix.setMatrixValue(): 用指定变换或变换描述的矩阵替换矩阵的内容。返回自身。
DOMMatrix.skewXSelf(): 通过沿 X 轴应用指定的倾斜变换来修改矩阵。返回自身。
DOMMatrix.skewYSelf(): 通过沿 Y 轴应用指定的倾斜变换来修改矩阵。返回自身。

静态方法

此接口继承自 DOMMatrixReadOnly 的方法。

fromFloat32Array(): 给定一个单精度（32 位）浮点值数组，创建一个新的可变 DOMMatrix 对象。如果数组包含六个值，则结果为 2D 矩阵；如果数组包含 16 个值，则结果为 3D 矩阵。否则，将抛出 TypeError 异常。
fromFloat64Array(): 给定一个双精度（64 位）浮点值数组，创建一个新的可变 DOMMatrix 对象。如果数组包含六个值，则结果为 2D 矩阵；如果数组包含 16 个值，则结果为 3D 矩阵。否则，将抛出 TypeError 异常。
fromMatrix(): 给定一个现有矩阵或提供其属性值的对象，创建一个新的可变 DOMMatrix 对象。

用法说明

DOMMatrix 接口定义的矩阵由四行四列组成。虽然在本篇文章的范围之外详细解释涉及的数学运算，但这种 4x4 的尺寸足以描述您可以应用于 2D 或 3D 几何体的任何变换。

以下是组成 4x4 抽象矩阵的 16 个元素（m_11 到 m_44）的位置：

\left [ \begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\ m_{12} & m_{22} & m_{32} & m_{42} \\ m_{13} & m_{23} & m_{33} & m_{43} \\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix} \right ]

DOMMatrix 接口的设计意图是将其用于标记语言中的所有矩阵。

规范

规范
Geometry Interfaces Module Level 1 # DOMMatrix

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 6 月 23 日修改。

在 GitHub 上查看此页面 • 报告此内容的某个问题