Question

I expected this to be 100% a no-brainer, but as it turns out, I cannot figure out what the x and y attributes of an svg created and manipulated with Raphael.js mean. I assumed they were the coordinates of the top-left corner of the object in relation to the canvas, but now I’m not so sure.

After creating a canvas (var paper = new Raphael(container,width,height)) and adding an image or rectangle to it, for example, if I retrieve the “x” and “y” attributes using the attr method (e.g. object.attr("x")), they’re both at 0. However, if I rotate that object and then retrieve the values of x and y again, the values don’t reflect the position of the top-left corner of my object in relation to the canvas anymore.

Can someone please explain this to me?

Answer 1

I fear @afaf12’s answer complacently goes only half the distance. He’s absolutely correct that transformation logic occurs after the fundamental attributes of a given element and doesn’t effect them, but it is certainly possible to retrieve the x and y of that element after transformations are applied. You’ll want to use the getBBox method, like this:

var bbox = elem.getBBox();
console.log("Transformed coordinates of element are %s,%s", bbox.x, bbox.y );

Please note that there is some trickiness involved — this returns the bounding box of the element, which is often a superset of the space occupied by the element — so there’s no guarantee that the returned point will be IN the element.

Another alternative occurs if you’re using paths — path.getPointAtLength also works with transformed coordinates, so you can get the x,y offset of the beginning of a path by calling

var coord = elem.getPointAtLength(0);
console.log("Transformed coordinates of path are %s,%s", coord.x, coord.y );