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