S. Greft

Yes, I checked it and changed my reply (see above). But you seem to have viewed the original reply. So, this is my new reply: But the custom getBBox function looks very complicated. So, why not just determine the position of o2 like that: var o2Rect = o2.getBoundingClientRect; var svgRect = svgContainer.getBoundingClientRect; // the <svg> container element var x = o2Rect.x - svgRect.x; var y = o2Rect.y - svgRect.y; This seems to be a very simple and working solution. Any objections / caveats? And, if the custom getBBox function is to be preferred for some reason, then another question arises: It seems to me that determining the correct position of an SVG element is fundamental. So, why is the custom getBBox function not part of the specification, or at least of a library, i.e. GSAP?

As OSUblake said: If you have an element at 0,0 and tween it to 100,100 using x and y, and then get it's bounding box, it will say it's still at 0,0. This goes for all transforms, x, y, scale, rotation, etc. Not very useful considering most animations use transforms. So, if you want to move an SVG object o1 to absolute coordinates determined by another SVG object o2, why not just determine the position of o2 like that: var o2Rect = o2.getBoundingClientRect; var svgRect = svgContainer.getBoundingClientRect; // the <svg> container element var x = o2Rect.x - svgRect.x; var y = o2Rect.y - svgRect.y; This seems to be a very simple and working solution. Any objections / caveats?

But the custom getBBox function looks very complicated. So, why not just determine the position of o2 like that: var o2Rect = o2.getBoundingClientRect; var svgRect = svgContainer.getBoundingClientRect; // the <svg> container element var x = o2Rect.x - svgRect.x; var y = o2Rect.y - svgRect.y; This seems to be a very simple and working solution. Any objections / caveats? And, if the custom getBBox function is to be preferred for some reason, then another question arises: It seems to me that determining the correct position of an SVG element is fundamental. So, why is the custom getBBox function not part of the specification, or at least of a library, i.e. GSAP?

I have implemented a simple GSAP SVG drag/drop snippet where a user can drag an SVG object o1, and when o1 is dropped while overlapping another SVG object o2 (tested with hitTest), o1 moves until it "docks" onto o2 (with TweenLite.to). I managed to do this with the help of getBoundingClientRect. I use the function to determine the coordinates of o2, substract the <svg> elem.getBoundingClientRect.x/y coordinates and use the result as input for TweenLite.to. I have some questions: Is my approach the recommended way to move an object to absolute coordinates determined by another object? Is there an alternative to using getBoundingClientRect? I assume getBBox cannot be used? getBBox.x and .y are always 0. I think it is because TweenLite.set and TweenLite.to use transforms. Correct? Is getBoundingClientRect an established method? According to https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Browser_compatibility it is not supported by all major browsers?