---
title: "SVGTransform | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface SVGTransform

The **`SVGTransform`** interface reflects one of the component transformations within an SVGTransformList; thus, an SVGTransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransform)

interface SVGTransform {  
    [angle](#angle): number;  
    [matrix](#matrix): [DOMMatrix](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix/);  
    [SVG\_TRANSFORM\_MATRIX](#svg_transform_matrix): 1;  
    [SVG\_TRANSFORM\_ROTATE](#svg_transform_rotate): 4;  
    [SVG\_TRANSFORM\_SCALE](#svg_transform_scale): 3;  
    [SVG\_TRANSFORM\_SKEWX](#svg_transform_skewx): 5;  
    [SVG\_TRANSFORM\_SKEWY](#svg_transform_skewy): 6;  
    [SVG\_TRANSFORM\_TRANSLATE](#svg_transform_translate): 2;  
    [SVG\_TRANSFORM\_UNKNOWN](#svg_transform_unknown): 0;  
    [type](#type): number;  
    [setMatrix](#setmatrix-1)(matrix?: [DOMMatrix2DInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)): void;  
    [setRotate](#setrotate-1)(angle: number, cx: number, cy: number): void;  
    [setScale](#setscale-1)(sx: number, sy: number): void;  
    [setSkewX](#setskewx-1)(angle: number): void;  
    [setSkewY](#setskewy-1)(angle: number): void;  
    [setTranslate](#settranslate-1)(tx: number, ty: number): void;  
}

##### Index

### Properties[](#properties)

[angle](#angle) [matrix](#matrix) [SVG\_TRANSFORM\_MATRIX](#svg_transform_matrix) [SVG\_TRANSFORM\_ROTATE](#svg_transform_rotate) [SVG\_TRANSFORM\_SCALE](#svg_transform_scale) [SVG\_TRANSFORM\_SKEWX](#svg_transform_skewx) [SVG\_TRANSFORM\_SKEWY](#svg_transform_skewy) [SVG\_TRANSFORM\_TRANSLATE](#svg_transform_translate) [SVG\_TRANSFORM\_UNKNOWN](#svg_transform_unknown) [type](#type)

### Methods[](#methods)

[setMatrix](#setmatrix) [setRotate](#setrotate) [setScale](#setscale) [setSkewX](#setskewx) [setSkewY](#setskewy) [setTranslate](#settranslate)

## Properties[](#properties-1)

### `Readonly`angle[](#angle)

angle: number

The **`angle`** read-only property of the SVGTransform interface represents the angle of the transformation in degrees.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransform/angle)

### `Readonly`matrix[](#matrix)

matrix: [DOMMatrix](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix/)

The **`matrix`** read-only property of the SVGTransform interface represents the transformation matrix that corresponds to the transformation type.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransform/matrix)

### `Readonly`SVG\_TRANSFORM\_MATRIX[](#svg_transform_matrix)

SVG\_TRANSFORM\_MATRIX: 1

### `Readonly`SVG\_TRANSFORM\_ROTATE[](#svg_transform_rotate)

SVG\_TRANSFORM\_ROTATE: 4

### `Readonly`SVG\_TRANSFORM\_SCALE[](#svg_transform_scale)

SVG\_TRANSFORM\_SCALE: 3

### `Readonly`SVG\_TRANSFORM\_SKEWX[](#svg_transform_skewx)

SVG\_TRANSFORM\_SKEWX: 5

### `Readonly`SVG\_TRANSFORM\_SKEWY[](#svg_transform_skewy)

SVG\_TRANSFORM\_SKEWY: 6

### `Readonly`SVG\_TRANSFORM\_TRANSLATE[](#svg_transform_translate)

SVG\_TRANSFORM\_TRANSLATE: 2

### `Readonly`SVG\_TRANSFORM\_UNKNOWN[](#svg_transform_unknown)

SVG\_TRANSFORM\_UNKNOWN: 0

### `Readonly`type[](#type)

type: number

The **`type`** read-only property of the SVGTransform interface represents the type of transformation applied, specified by one of the SVG\_TRANSFORM\_\* constants defined on this interface.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransform/type)

## Methods[](#methods-1)

### setMatrix[](#setmatrix)

-   setMatrix(matrix?: [DOMMatrix2DInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)): void[](#setmatrix-1)
    
    The **`setMatrix()`** method of the SVGTransform interface sets the transform type to SVG\_TRANSFORM\_MATRIX, with parameter matrix defining the new transformation.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransform/setMatrix)
    
    #### Parameters
    
    -   `Optional`matrix: [DOMMatrix2DInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)
    
    #### Returns void
    

### setRotate[](#setrotate)

-   setRotate(angle: number, cx: number, cy: number): void[](#setrotate-1)
    
    The **`setRotate()`** method of the SVGTransform interface sets the transform type to SVG\_TRANSFORM\_ROTATE, with parameter angle defining the rotation angle and parameters cx and cy defining the optional center of rotation.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransform/setRotate)
    
    #### Parameters
    
    -   angle: number
    -   cx: number
    -   cy: number
    
    #### Returns void
    

### setScale[](#setscale)

-   setScale(sx: number, sy: number): void[](#setscale-1)
    
    The **`setScale()`** method of the SVGTransform interface sets the transform type to SVG\_TRANSFORM\_SCALE, with parameters sx and sy defining the scale amounts.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransform/setScale)
    
    #### Parameters
    
    -   sx: number
    -   sy: number
    
    #### Returns void
    

### setSkewX[](#setskewx)

-   setSkewX(angle: number): void[](#setskewx-1)
    
    The **`setSkewX()`** method of the SVGTransform interface sets the transform type to SVG\_TRANSFORM\_SKEWX, with parameter angle defining the amount of skew along the X-axis.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransform/setSkewX)
    
    #### Parameters
    
    -   angle: number
    
    #### Returns void
    

### setSkewY[](#setskewy)

-   setSkewY(angle: number): void[](#setskewy-1)
    
    The **`setSkewY()`** method of the SVGTransform interface sets the transform type to SVG\_TRANSFORM\_SKEWY, with parameter angle defining the amount of skew along the Y-axis.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransform/setSkewY)
    
    #### Parameters
    
    -   angle: number
    
    #### Returns void
    

### setTranslate[](#settranslate)

-   setTranslate(tx: number, ty: number): void[](#settranslate-1)
    
    The **`setTranslate()`** method of the SVGTransform interface sets the transform type to SVG\_TRANSFORM\_TRANSLATE, with parameters tx and ty defining the translation amounts.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransform/setTranslate)
    
    #### Parameters
    
    -   tx: number
    -   ty: number
    
    #### Returns void