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 |
|
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 |
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 |
Inserts a new item into the list at the specified position. The first
item is number 0. If Exceptions:
|
replaceItem(in
|
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 |
Inserts a new item at the end of the list. If Exceptions:
|
createSVGTransformFromMatrix(in
|
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:
|
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) # InterfaceSVGTransformList |
Browser compatibility
BCD tables only load in the browser