How do you transform event coordinates to SVG coordinates despite bogus getBoundingClientRect()?

Question

I\'m experimenting with dynamically drawing things on an SVG element based on the position of the mouse. Unfortunately, I\'m having difficulty translating the mouse coordinates

Answer 1

The event target may or may not be the SVG container. See the MDN Documentation. If you want to get the container's bounding box, call getBoundingClientRect directly on the container. I've forked your fiddle here:

http://jsfiddle.net/4RF75/1/

Also, if can be sure the SVG element won't change size, it's probably a good idea to cache the bounding box, as (especially on WebKit browsers) getBoundingClientRect will trigger a layout, which may be too expensive to do in an event handler.