mySVGLocatable.getCTM() in SVG 1.1
Return the Current Transformation Matrix for the element.
- Return Type
- SVGMatrix
Description
<svg width="600" height="600" viewBox="0 0 800 600" onload="Init(evt)">
<title>SVGLocatable.getCTM()</title>
<g id="outer" transform="translate(100,200)">
<g id="inner" transform="scale(2)">
<text id="text">Hello World</text>
</g>
</g>
<script type="text/ecmascript"><![CDATA[
function Init(evt){
var doc = evt.target.ownerDocument;
var g1 = doc.getElementById('outer');
var g2 = doc.getElementById('inner');
var t = doc.getElementById('text');
ShowMatrix(g1.getCTM());
ShowMatrix(g2.getCTM());
ShowMatrix(t.getCTM());
}
function ShowMatrix(m){
alert('[ ['+m.a+' '+m.c+' '+m.e+'] ['+m.b+' '+m.d+' '+m.f+'] [0 0 1] ]');
}
]]></script>
</svg>
In the above code, the alerts should say:
[ [1 0 100] [0 1 200] [0 0 1] ] [ [2 0 100] [0 2 200] [0 0 1] ] [ [2 0 100] [0 2 200] [0 0 1] ]
showing that the transformations are cumulative.
Note that ASV3 (unlike ASV6 or CSV2) is broken and only returns the transformation matrix for this element with respect to its parent. (Basically the transformation matrix which corresponds to the multiplication of all transformations applied explicitly to this element.) ASV3 for the above yields:
[ [1 0 100] [0 1 200] [0 0 1] ] [ [2 0 0] [0 2 0] [0 0 1] ] [ [1 0 0] [0 1 0] [0 0 1] ]
For more information on nested transformation matrices, see the SVG1.1 specification, setction 7.5.