DOMMatrixReadOnly: translate() 方法
注意：此功能在 Web Workers 中可用。
DOMMatrixReadOnly 介面的 translate() 方法建立一個新的矩陣，該矩陣是原始矩陣應用平移後的結果。
語法
js
translate(translateX, translateY)
translate(translateX, translateY, translateZ)
引數
translateX-
一個數字，表示平移向量的橫座標（x 座標）。
translateY-
一個數字，表示平移向量的縱座標（y 座標）。
translateZ可選-
一個數字，表示平移向量的 z 分量。如果未提供，則預設為 0。如果此值不是 0，則結果矩陣將是 3D 的。
返回值
返回一個 DOMMatrix，其中包含一個新矩陣，該矩陣是原始矩陣透過給定向量平移後的結果。原始矩陣不會被修改。
如果沿 z 軸應用平移，則結果矩陣將是一個 4x4 的 3D 矩陣。
示例
此 SVG 包含兩個正方形，一個紅色，一個藍色，它們都位於文件原點
html
<svg width="250" height="250" viewBox="0 0 50 50">
<rect width="25" height="25" fill="red" />
<rect id="transformed" width="25" height="25" fill="blue" />
</svg>
以下 JavaScript 首先建立一個單位矩陣，然後使用 translate() 方法建立一個新的、已平移的矩陣 — 然後將其作為 transform 應用於藍色正方形。紅色正方形保持不變。
js
const matrix = new DOMMatrixReadOnly().translate(25, 25);
document
.querySelector("#transformed")
.setAttribute("transform", matrix.toString());
規範
| 規範 |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-translate |
瀏覽器相容性
載入中…