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
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) {
var svgroot = evt.target.parentNode;
var tfmList = evt.target.transform.baseVal;
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);
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: