DOMMatrix: scaleSelf() 方法
注意：此功能在 Web Workers 中可用。
DOMMatrix 接口的 scaleSelf() 方法是一个可变转换方法，它通过应用指定的缩放因子来修改矩阵，该缩放因子以给定的原点为中心，默认原点为 (0, 0)，并返回缩放后的矩阵。
要缩放矩阵而不修改它，请参阅 DOMMatrixReadOnly.scale()，它会创建一个新的缩放矩阵，而保持原矩阵不变。
语法
js
scaleSelf()
scaleSelf(scaleX)
scaleSelf(scaleX, scaleY)
scaleSelf(scaleX, scaleY, scaleZ)
scaleSelf(scaleX, scaleY, scaleZ, originX)
scaleSelf(scaleX, scaleY, scaleZ, originX, originY)
scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)
参数
scaleX可选-
x 轴缩放值的乘数。如果未提供，则默认为
1。 scaleY可选-
y 轴缩放值的乘数。如果未提供，则默认为
scaleX的值。 scaleZ可选-
z 轴缩放值的乘数。如果此值不等于 1，则生成的矩阵将是 3D 的。
originX可选-
转换原点的 x 坐标。如果未提供原点，则默认为 0。
originY可选-
转换原点的 y 坐标。如果未提供原点，则默认为 0。
originZ可选-
转换原点的 z 坐标。如果未提供原点，则默认为 0。如果此值不等于 0，则生成的矩阵将是 3D 的。
返回值
返回自身；一个 DOMMatrix。
如果沿 z 轴应用缩放，则矩阵将是一个 4x4 的 3D 矩阵。
示例
此 SVG 包含两个半透明的方形，一个红色，一个蓝色，每个都位于文档原点。
html
<svg viewBox="0 0 50 50" height="200">
<rect width="25" height="25" fill="#ff000099" />
<rect id="transformed" width="25" height="25" fill="#0000ff99" />
</svg>
此 JavaScript 首先创建一个矩阵，然后使用 scaleSelf() 方法将矩阵缩放为宽度减半、高度加倍的矩阵。
然后将该矩阵作为 transform 应用于蓝色方形，从而改变其尺寸和位置。红色方形保持不变。
js
const matrix = new DOMMatrix();
matrix.scaleSelf(0.5, 2);
document
.querySelector("#transformed")
.setAttribute("transform", matrix.toString());
规范
| 规范 |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrix-scaleself |
浏览器兼容性
加载中…
另见
DOMMatrixReadOnly.scale()DOMMatrix.scale3dSelf()- CSS
transform属性和scaleSelf()和matrix()函数 - CSS 变换模块
- SVG
transform属性 CanvasRenderingContext2D接口transform()方法