Cross-browser solution for replacing the use of event.layerX and event.layerY

So, i thought a little about this problem, since the Chrome team wants to remove layerX and layerY for strange reasons.

First, we need the position of your container :

var position = $paper.offset();

(for those reading without the fiddle opened, $paper is the div where the svg will be drawn)

It gives us two coords, position.top and position.left, so we know where in the page is the container.

Then, on click, we use e.pageX and e.pageY, which are the coords of the page. To emulate layerX and layerY, we use (e.pageX - position.left) and (e.pageY - position.top)

Et voilà : http://jsfiddle.net/GHZSd/30/

Works on chrome, Safari, FF and Opera.