SVGTransformList

In This Article

SVG transform list interface
1. Interface overview
Properties
Methods
Example
1. Using multiple SVGTransform objects
Browser compatibility

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	`void clear()` `SVGTransform` `initialize(in SVGTransform newItem)` `SVGTransform` `getItem(in unsigned long index)` `SVGTransform` `insertItemBefore(in SVGTransform newItem, in unsigned long index)` `SVGTransform` `replaceItem(in SVGTransform newItem, in unsigned long index)` `SVGTransform` `removeItem(in unsigned long index)` `SVGTransform` `appendItem(in SVGTransform newItem)` `SVGTransform` `createSVGTransformFromMatrix(in SVGMatrix)` `SVGTransform` `consolidate()`
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.

Example

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="https://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 seperate 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 SVGTranform 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:

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	?	(Yes)	?	(Yes)	?
`length`	?	9.0 (9.0)	?	11	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?
`length`	?	9.0 (9.0)	?	?	?

Document Tags and Contributors

Tags:

Contributors to this page: jwhitlock, fscholz, torbasow, kscarfone, seth_battin, Sheppy, arasbm, JohnBicknell, Jeremie

Last updated by: jwhitlock, Aug 12, 2015, 3:47:56 PM