Finding Offset Position of SVG Element

Question

I've run into this problem a lot with D3. A lot of the time I like to overlay HTML objects over my SVG.

My current strategy is creating an empty DIV next to the SVG element called .html-overlay. I position it according to the internal padding I set in the SVG for my main graphic (ex: 20px). Then I use the following function (with jQuery) to figure out where the HTML element should go:

//element is the object returned by D3 .append() var getOffset: function(element) {         var $element = $(element[0][0]);         return {             left: $element.offset().left - $('.html-overlay').offset().left,             top: $element.offset().top - $('.html-overlay').offset().top         };     } 

I wonder, there MUST be some internal (non-jQuery dependant) way to quickly get an element's offset. It's very useful (especially after an elements goes through multiple translations, rotations, scales, etc.)

It would also be great to have functions for figuring out the offset of the "center" of an element, the topmost point of element, bottommost, leftmost, rightmost, etc.

NOTE:

The getBoundingClientRect() doesn't give the correct numbers for some reason:

var $element = $(element[0][0]);              console.log($element.offset(), element[0][0].getBoundingClientRect()) Object left: 328 top: 248.8333282470703 __proto__: Object  ClientRect bottom: 376.83331298828125 height: 139.99998474121094 left: 328 right: 478 top: 236.8333282470703 width: 150 

Answer 1

did you try

var xywh =element[0][0].getBoundingClientRect(); 

seems to have everything in it? (original soution is in this post)