DOMMatrixReadOnly: translate() 方法

DOMMatrixReadOnly 接口的 translate() 方法创建一个新的矩阵，该矩阵是原始矩阵应用平移变换后的结果。

语法

js
DOMMatrix.translate(translateX, translateY)
DOMMatrix.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());

规范

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。