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

# Interface SVGTransformList

The **`SVGTransformList`** interface defines a list of SVGTransform objects.

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

interface SVGTransformList {  
    [length](#length): number;  
    [numberOfItems](#numberofitems): number;  
    ["\[iterator\]"](#iterator-1)(): [ArrayIterator](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ArrayIterator/)<[SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)\>;  
    [appendItem](#appenditem-1)(newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/);  
    [clear](#clear-1)(): void;  
    [consolidate](#consolidate-1)(): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/) | null;  
    [createSVGTransformFromMatrix](#createsvgtransformfrommatrix-1)(matrix?: [DOMMatrix2DInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/);  
    [getItem](#getitem-1)(index: number): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/);  
    [initialize](#initialize-1)(newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/);  
    [insertItemBefore](#insertitembefore-1)(newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/), index: number): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/);  
    [removeItem](#removeitem-1)(index: number): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/);  
    [replaceItem](#replaceitem-1)(newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/), index: number): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/);  
    \[index: number\]: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/);  
}

#### Indexable

-   \[index: number\]: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    

##### Index

### Properties[](#properties)

[length](#length) [numberOfItems](#numberofitems)

### Methods[](#methods)

[\[iterator\]](#iterator) [appendItem](#appenditem) [clear](#clear) [consolidate](#consolidate) [createSVGTransformFromMatrix](#createsvgtransformfrommatrix) [getItem](#getitem) [initialize](#initialize) [insertItemBefore](#insertitembefore) [removeItem](#removeitem) [replaceItem](#replaceitem)

## Properties[](#properties-1)

### `Readonly`length[](#length)

length: number

The **`length`** read-only property of the SVGTransformList interface represents the number of items in the list.

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

### `Readonly`numberOfItems[](#numberofitems)

numberOfItems: number

The **`numberOfItems`** read-only property of the SVGTransformList interface represents the number of items in the list.

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

## Methods[](#methods-1)

### \[iterator\][](#iterator)

-   "\[iterator\]"(): [ArrayIterator](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ArrayIterator/)<[SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)\>[](#iterator-1)
    
    #### Returns [ArrayIterator](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ArrayIterator/)<[SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)\>
    

### appendItem[](#appenditem)

-   appendItem(newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)[](#appenditem-1)
    
    The **`appendItem()`** method of the SVGTransformList interface inserts a new item at the end of the list.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransformList/appendItem)
    
    #### Parameters
    
    -   newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    
    #### Returns [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    

### clear[](#clear)

-   clear(): void[](#clear-1)
    
    The **`clear()`** method of the SVGTransformList interface clears all existing current items from the list, with the result being an empty list.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransformList/clear)
    
    #### Returns void
    

### consolidate[](#consolidate)

-   consolidate(): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/) | null[](#consolidate-1)
    
    The **`consolidate()`** method of the SVGTransformList interface consolidates the list of separate SVGTransform objects by multiplying the equivalent transformation matrices together to result in a list consisting of a single SVGTransform object of type SVG\_TRANSFORM\_MATRIX.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransformList/consolidate)
    
    #### Returns [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/) | null
    

### createSVGTransformFromMatrix[](#createsvgtransformfrommatrix)

-   createSVGTransformFromMatrix(matrix?: [DOMMatrix2DInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)[](#createsvgtransformfrommatrix-1)
    
    The **`createSVGTransformFromMatrix()`** method of the SVGTransformList interface creates an SVGTransform object which is initialized to a transform of type SVG\_TRANSFORM\_MATRIX and whose values are the given matrix.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransformList/createSVGTransformFromMatrix)
    
    #### Parameters
    
    -   `Optional`matrix: [DOMMatrix2DInit](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DOMMatrix2DInit/)
    
    #### Returns [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    

### getItem[](#getitem)

-   getItem(index: number): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)[](#getitem-1)
    
    The **`getItem()`** method of the SVGTransformList interface returns the specified item from the list.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransformList/getItem)
    
    #### Parameters
    
    -   index: number
    
    #### Returns [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    

### initialize[](#initialize)

-   initialize(newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)[](#initialize-1)
    
    The **`initialize()`** method of the SVGTransformList interface clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransformList/initialize)
    
    #### Parameters
    
    -   newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    
    #### Returns [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    

### insertItemBefore[](#insertitembefore)

-   insertItemBefore(newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/), index: number): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)[](#insertitembefore-1)
    
    The **`insertItemBefore()`** method of the SVGTransformList interface inserts a new item into the list at the specified position.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransformList/insertItemBefore)
    
    #### Parameters
    
    -   newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    -   index: number
    
    #### Returns [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    

### removeItem[](#removeitem)

-   removeItem(index: number): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)[](#removeitem-1)
    
    The **`removeItem()`** method of the SVGTransformList interface removes an existing item from the list.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransformList/removeItem)
    
    #### Parameters
    
    -   index: number
    
    #### Returns [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    

### replaceItem[](#replaceitem)

-   replaceItem(newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/), index: number): [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)[](#replaceitem-1)
    
    The **`replaceItem()`** method of the SVGTransformList interface replaces an existing item in the list with a new item.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGTransformList/replaceItem)
    
    #### Parameters
    
    -   newItem: [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)
    -   index: number
    
    #### Returns [SVGTransform](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.SVGTransform/)