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.
An SVGTransformList
is indexable and can be accessed like an array.
Interface overview
Also implement | None |
---|---|
Methods |
|
Properties |
|
Normative document | SVG 1.1 (2nd Edition) |
Instance properties
Name | Type | Description |
---|---|---|
numberOfItems |
unsigned long | The number of items in the list. |
length
Non-standard
|
unsigned long | The number of items in the list. |
Instance 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.
html
<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
const svgroot = evt.target.parentNode;
// SVGTransformList of the element that has been clicked on
const tfmList = evt.target.transform.baseVal;
// Create a separate transform object for each transform
const translate = svgroot.createSVGTransform();
translate.setTranslate(50,5);
const rotate = svgroot.createSVGTransform();
rotate.setRotate(10,0,0);
const 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) 2 # InterfaceSVGTransformList |
Browser compatibility
BCD tables only load in the browser