Question

I could not find much details on getTransformToElement method, and how to use it correctly.

From the spec

“Returns the transformation matrix
from the user coordinate system on the
current element (after application of
the ‘transform’ attribute, if any) to
the user coordinate system on
parameter element (after application
of its ‘transform’ attribute, if
any).”

Terminology like, SVG canvas, viewbox, viewport, user cordinate, screen cordinate (http://www.w3.org/TR/SVG/coords.html) etc make it hard to understand what exactly this interface is used for.

thanks,

bsr

Answer 1

It returns a Transformation Matrix, I wouldn’t worry too much about that other terminology for now. If you have some SVG like this:

<svg id="mysvg" viewBox="0 0 640 480">
    <g transform="skewX(45) skewY(33)">
        <text x="60" y="290" id="mytext">Example</text>
    </g>
</svg>

You can then use getTransformToElement like this:

//Get the SVG root for context
var s = document.getElementById('mysvg');
//Get a reference to the element
var t = document.getElementById('mytext');
//Find the transformation that would need to be applied to s to put it in the same co-ordinate space as t
var m = s.getTransformToElement(t);

At the end of that code m will be an object representing a matrix (there’s a bunch of methods too, but I’m ignoring them):

m = {a: 1, b: -0.6494075655937195, c: -1, d: 1.6494076251983643, e: 0, f: 0}

You can then use that matrix to apply the same transform as on mytext relative to mysvg to any other element as per the matrix multiplication from the SVG spec:

As noted in the comment below this method is deprecated in favour of getCTM in the upcoming SVG 2 standard.