这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

scale() 方法在 DOMMatrixReadOnly interface creates a new matrix being the result of the original matrix with a scale transform applied.

句法

scale() method is specified with either one or six values.

DOMMatrix.scale(scaleX[, scaleY][, scaleZ][, originX][, originY][, originZ])
							

参数

scaleX

A multiplier for the scale value on the x-axis.

scaleY 可选

A multiplier for the scale value on the y-axis.  If not supplied, this defaults to the value of scaleX .

scaleZ 可选

A multiplier for the scale value on the z-axis.  If this value is anything other than 1, the resulting matrix will be 3D.

originX 可选

An x-coordinate for the origin of the transformation.  If no origin is supplied, this defaults to 0.

originY 可选

A y-coordinate for the origin of the transformation.  If no origin is supplied, this defaults to 0.

originZ 可选

A z-coordinate for the origin of the transformation.  If no origin is supplied, this defaults to 0. If this value is anything other than 0, the resulting matrix will be 3D.

返回值

返回 DOMMatrix containing a new matrix being the result of the matrix x and y dimensions being scaled by the given factor, centered on the origin given. The original matrix is not modified.

If a scale is applied about the z-axis, the resulting matrix will be a 4x4 3D matrix.

注意 : At time of writing, Firefox still supports an older version of the specification that accepts either one or three values.

DOMMatrix.scale(scale[, originX][, originY])
							

We'll show an example of how you can deal with the cross-browser support implications of this in the Examples section, below.

范例

This SVG contains three squares, one red, one blue, and one green, each positioned at the document origin:

<svg width="250" height="250" viewBox="0 0 25 25">
  <rect width="25" height="25" fill="red" />
  <rect id="transformed" width="25" height="25" fill="blue" />
  <rect id="transformedOrigin" width="25" height="25" fill="green" />
</svg>
							

This JavaScript first creates an identity matrix, then uses the scale() method to create a new matrix with a single parameter.

We test if the browser supports a six parameter scale() method by creating a new matrix using three parameters and observing it's is2D property — if this is false then the third parameter has been accepted by the browser as a scaleZ parameter, making this a 3D matrix.

We then create a new matrix scaled about a given origin, using either three or six parameters depending on the browser support.

These new matrices are then applied to the blue and green squares as a transform , changing their dimensions and position. The red square is left in place.

const matrix = new DOMMatrixReadOnly();
const scaledMatrix = matrix.scale(0.5);
let scaledMatrixWithOrigin = matrix.scale(0.5, 25, 25);
// if the browser has interpreted these parameters as scaleX, scaleY, scaleZ, the resulting matrix is 3D
const browserExpectsSixParamScale = !scaledMatrixWithOrigin.is2D;
if (browserExpectsSixParamScale) {
  scaledMatrixWithOrigin = matrix.scale(0.5, 0.5, 1, 25, 25, 0);
}
document.querySelector('#transformed').setAttribute('transform', scaledMatrix.toString());
document.querySelector('#transformedOrigin').setAttribute('transform', scaledMatrixWithOrigin.toString());
							

Screenshot	Live sample

规范

规范	状态	注释
Geometry Interfaces Module Level 1 The definition of 'DOMMatrixReadOnly.scale()' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
scale()	Chrome 45	Edge 79	Firefox 33 注意事项 33 注意事项 Firefox 69 introduced support for the modern six-parameter syntax for scale() . Previously, it only supported the older three-parameter syntax: scale( scaleX [, originX ][, originY ]]]) .	IE 不支持 No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 部分支持 33 注意事项 部分支持 33 注意事项 Firefox for Android only supports the older three-parameter syntax for scale() : scale( scaleX [, originX ][, originY ]]]) , and not the six-parameter syntax.	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

见实现注意事项。

元数据

• 最后修改： Mar 18, 2019