SVGTransformList

SVG transform list interface

The SVGTransformList defines a list of SVGTransform objects.

An SVGTransformList object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.

Note: Starting in Gecko 9.0,the SVGTransformList DOM interface is now indexable and can be accessed like Arrays

Interface overview

Also implement None
Methods
Properties
  • readonly unsigned long numberOfItems
  • readonly unsigned long length
Normative document SVG 1.1 (2nd Edition)

Properties

Name Type Description
numberOfItems unsigned long The number of items in the list.
length unsigned long The number of items in the list.

Methods

Name & Arguments Return Description
clear() void

Clears all existing current items from the list, with the result being an empty list.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the list corresponds to a read only attribute or when the object itself is read only.
initialize(in SVGTransform newItem) SVGTransform

Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. The return value is the item inserted into the list.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the list corresponds to a read only attribute or when the object itself is read only.
getItem(in unsigned long index) SVGTransform

Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list. The first item is number 0.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the list corresponds to a read only attribute or when the object itself is read only.
insertItemBefore(in SVGTransform newItem, in unsigned long index) SVGTransform

Inserts a new item into the list at the specified position. The first item is number 0. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is before the removal of the item. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the list corresponds to a read only attribute or when the object itself is read only.
replaceItem(in SVGTransform newItem, in unsigned long index) SVGTransform

Replaces an existing item in the list with a new item. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is before the removal of the item.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the list corresponds to a read only attribute or when the object itself is read only.
  • a DOMException with code INDEX_SIZE_ERR is raised if the index number is greater than or equal to numberOfItems.
removeItem(in unsigned long index) SVGTransform

Removes an existing item from the list.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the list corresponds to a read only attribute or when the object itself is read only.
  • a DOMException with code INDEX_SIZE_ERR is raised if the index number is greater than or equal to numberOfItems.
appendItem(in SVGTransform newItem) SVGTransform

Inserts a new item at the end of the list. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the list corresponds to a read only attribute or when the object itself is read only.
createSVGTransformFromMatrix(in SVGMatrix) SVGTransform Creates an SVGTransform object which is initialized to transform of type SVG_TRANSFORM_MATRIX and whose values are the given matrix. The values from the parameter matrix are copied, the matrix parameter is not adopted as SVGTransform::matrix.
consolidate() SVGTransform

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. The consolidation operation creates new SVGTransform object as the first and only item in the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when the list corresponds to a read only attribute or when the object itself is read only.

Examples

Using multiple SVGTransform objects

In this example we create a function that will apply three different transformations to the SVG element that has been clicked on. In order to do this we create a separate SVGTransform object for each transformation -- such as translate, rotate, and scale. We apply multiple transformation by appending the transform object to the SVGTransformList associated with an SVG element.

<svg id="my-svg" viewBox="0 0 300 280"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example showing how to transform svg elements that using SVGTransform objects</desc>
  <script type="application/ecmascript"><![CDATA[
    function transformMe(evt) {
      // svg root element to access the createSVGTransform() function
      var svgroot = evt.target.parentNode;

      // SVGTransformList of the element that has been clicked on
      var tfmList = evt.target.transform.baseVal;

      // Create a separate transform object for each transform
      var translate = svgroot.createSVGTransform();
      translate.setTranslate(50,5);

      var rotate = svgroot.createSVGTransform();
      rotate.setRotate(10,0,0);

      var scale = svgroot.createSVGTransform();
      scale.setScale(0.8,0.8);

      // apply the transformations by appending the SVGTransform objects to the SVGTransformList associated with the element
      tfmList.appendItem(translate);
      tfmList.appendItem(rotate);
      tfmList.appendItem(scale);
    }
  ]]></script>

  <polygon fill="orange" stroke="black" stroke-width="5"
           points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225"
           onclick="transformMe(evt)"/>
  <rect x="200" y="100" width="100" height="100"
        fill="yellow" stroke="black" stroke-width="5"
        onclick="transformMe(evt)"/>
  <text x="40" y="250"
        font-family="Verdana" font-size="16" fill="green" >
    Click on a shape to transform it
  </text>
</svg>

Live preview:

Specifications

Specification
Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG)
# InterfaceSVGTransformList

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
SVGTransformList
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0
appendItem
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0
clear
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0
consolidate
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0
createSVGTransformFromMatrix
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0
getItem
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0
initialize
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0
insertItemBefore
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0
length
35
79
9
No
≤12.1
13
37
35
9
≤12.1
13
1.0
numberOfItems
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0
removeItem
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0
replaceItem
1
12
1.5
9
≤12.1
≤4
≤37
18
4
≤12.1
≤3
1.0

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGTransformList