[SOLVED] Get absolute coordinates of SVG path with Javascript

Get absolute coordinates of SVG path with Javascript

I am creating a program which converts a SVG file to my own format. I have created a web based application to do this. I use the default DOM parsing functionality of web browsers to iterate over the SVG contents.

With Javascript I can get a SVG path element using:

var path = document.getElementById("path3388");

I can get the path segments using:

var pathSegments = path.pathSegList

However these path segments are relative to whatever parent SVG element is defined. Transforms are not included in the path segment list.

Is there a way to get the absolute coordinates of this path as they are ultimately used when drawn on the screen?

Example: say I got the following SVG snippet:

<g transform="translate(100, 100)">
    <g transform="translate(50, 50)">
        <path d="M 0,0 10,0 10,10"></path>
    </g>
</g>

What I want is to retrieve is the coordinates of the path with the transforms of the two g elements applied. In this case the coordinates of the path should be:

[150,150], [160, 150], [160, 160]

Solution

You want is to do something like this to each path segment coordinate...

var root = document.getElementById("root");
var path = document.getElementById("path");
var point = root.createSVGPoint();
point.x = 0;  // replace this with the x co-ordinate of the path segment
point.y = 0;  // replace this with the y co-ordinate of the path segment
var matrix = path.getTransformToElement(root);
var position = point.matrixTransform(matrix);

alert(position.x + ", " + position.y);

<svg id="root">
  <g transform="translate(100, 100)">
    <g transform="translate(50, 50)">
        <path id="path" d="M 0,0 10,0 10,10"></path>
    </g>
</g>
</svg>

If you find that there's no getTransformToElement function any more since it's been removed in SVG 2 then this polyfill will restore that missing method.