Thescale() method of theDOMMatrixReadOnly interface creates a new matrix being the result of theoriginal matrix with a scale transform applied.

Syntax

scale(scaleX)scale(scaleX, scaleY)scale(scaleX, scaleY, scaleZ)scale(scaleX, scaleY, scaleZ, originX)scale(scaleX, scaleY, scaleZ, originX, originY)scale(scaleX, scaleY, scaleZ, originX, originY, originZ)

Parameters

scaleX

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

scaleYOptional

A multiplier for the scale value on the y-axis. If not supplied, this defaults tothe value ofscaleX.

scaleZOptional

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

originXOptional

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

originYOptional

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

originZOptional

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

Return value

Returns aDOMMatrixcontaining a new matrix being the result of the matrix x and y dimensions being scaledby 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 atthe document origin:

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

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

We test if the browser supports a six parameterscale() method by creatinga new matrix using three parameters and observing itsis2D property. Ifthis isfalse then the third parameter has been accepted by the browser asascaleZ parameter, making this a 3D matrix.

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

These new matrices are then applied to the blue and green squares as atransform, changing their dimensions and position. The red square is leftin 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 3Dconst 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

Browser compatibility