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.