Make getPosition() calculate offsets correctly for svg elements

[P0lip]

Current implementation of getPosition is broken for children of svg elements.
Their clientHeight and clientWidth values are usually (or always, not sure, though) equal to 0, therefore calculated offsets are wrong.
This may be a common issue for tooltips whose tips are some sort of svg child elements, like polygon, rect, line, circle etc. In such cases, their placement is usually wrong.

[austil]

Hey, I runned into the exact same problem at work (tooltip on svg elements).
I cherry picked your commit and it work perfectly. Thanks a lot !

[aronhelser]

This looks very reasonable.
@P0lip could you comment on what differences we might see using getBoundingClientRect() vs clientWidth,clientHeight? If there are differences, and we can test, I'm fine merging.

I'd love to see an example added that used SVG!

[austil]

Check this https://bugzilla.mozilla.org/show_bug.cgi?id=874811

tldr :

SVG elements don't have a CSS layout box
The clientTop, clientLeft, clientWidth, and clientHeight attributes must return zero if the element does not have any associated CSS layout box

use getBoundingClientRect

PS : nice to see a maintainer back on this project

[aronhelser]

Looking at https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth, it seems getBoundingClientRect() will return fractional values. Otherwise it seems equivalent, and works for SVG. Have you seen any ill-effects because of fractional values?

Update: I tested the examples, and can observe no differences.

[P0lip]

Yes, getBoundingClientRect() returns fractional values, yet the general result doesn't differ from clientWidth, clientHeight. Well, at least, I can't seem to find any change.

Regarding example - I will try to add some in a couple of minutes.

[aronhelser]

Oops, sorry, I missed your comment before I merged. Feel free to submit another PR, I'll get it right in.
If you start your commit message like:

fix(examples): add SVG example

then I can test auto-publish of the examples 😄

[aronhelser]

🎉 This PR is included in version 3.5.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀