Getting SVG position in JS

Tue Jul 01 2014

How the get the coordinates of an SVG element even when page scrolling is involved.

I had some issues getting the right position of an SVG element that was so far down on a page, that you had to scroll to it.

jQuery's offset() and position() doesn't work too well with SVG, so to get the right position, one must use getBoundingClientRect(). This has the drawback of not including the scroll position of the page. To get the x and y coordinates of an SVG on the page you must use:

var svg = document.getElementById("svg");
var x = svg.getBoundingClientRect().left-window.scrollX;
var y = svg.getBoundingClientRect().top-window.scrollY;