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 |
|
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:
|
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:
|
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:
|
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 Exceptions:
|
replaceItem(in SVGTransform newItem, in unsigned long index)
|
SVGTransform
|
Replaces an existing item in the list with a new item. If Exceptions:
|
removeItem(in unsigned long index)
|
SVGTransform
|
Removes an existing item from the list. Exceptions:
|
appendItem(in SVGTransform newItem)
|
SVGTransform
|
Inserts a new item at the end of the list. If Exceptions:
|
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 Exceptions:
|
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="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 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:
Specifications
Specification | Status | Comment |
Scalable Vector Graphics (SVG) 2The definition of 'SVGTransformList' in that specification. | Candidate Recommendation | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of 'SVGTransformList' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
SVGTransformList
|
Chrome
Full support Yes |
Edge
Full support ≤18 |
Firefox
Full support Yes |
IE
? |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support Yes |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
|
Chrome
Full support Yes |
Edge
Full support ≤79 |
Firefox
Full support 9 |
IE
No support No |
Opera
Full support Yes |
Safari
? |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 9 |
Opera Android
Full support Yes |
Safari iOS
? |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
SVGTransformList by Mozilla Contributors is licensed under CC-BY-SA 2.5.