DOMMatrixReadOnly: scale() method
The scale()
method of the
DOMMatrixReadOnly
interface creates a new matrix being the result of the
original matrix with a scale transform applied.
Syntax
The scale()
method is specified with either one or six values.
js
DOMMatrixReadOnly.scale(scaleX);
DOMMatrixReadOnly.scale(scaleX, scaleY);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ, originX);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ, originX, originY);
DOMMatrixReadOnly.scale(scaleX, scaleY, scaleZ, originX, originY, originZ);
Parameters
scaleX
-
A multiplier for the scale value on the x-axis.
scaleY
Optional-
A multiplier for the scale value on the y-axis. If not supplied, this defaults to the value of
scaleX
. scaleZ
Optional-
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
Optional-
An x-coordinate for the origin of the transformation. If no origin is supplied, this defaults to 0.
originY
Optional-
A y-coordinate for the origin of the transformation. If no origin is supplied, this defaults to 0.
originZ
Optional-
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.
Return value
Returns a 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 4✕4 3D matrix.
Examples
This SVG contains three squares, one red, one blue, and one green, each positioned at the document origin:
html
<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 its 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.
js
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());
Specifications
Specification |
---|
Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-scale |
Browser compatibility
BCD tables only load in the browser