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 上檢視此頁面 • 報告此內容的某個問題