Coordinate transformation in SVG inside Firefox with scrollbars

Question

I am trying to calculate the correct mouse coordinates, in user coordinate space, in an SVG document from within Javascript code when scrollbars come into existence when that SVG file is viewed from within FireFox. But it is not quite correct. This is needed to get SVG-based tooltips drawn correctly even when the SVG is scrolled horizontally or vertically.

I desire to have the coordinate transformations be correct across IE and Firefox browsers. Also, I want to do this with a single-source Javascript+SVG solution that hopefully does not require browser-specific conditional code. I am currently using FireFox 3.5.10, but I would consider upgrading to a more recent version of FireFox, and I have not tested IE yet.

The problem I ran into is the coordinate offsets for the scrollbars: The mouse coordinate transformation is not sufficient when scrollbars come into existence over the SVG element inside Firefox. As a debugging aid to figure out the coordinate transformations, I am working with a simple SVG file that contains Javascript handlers, all in one file, that simply draws crosshairs at the mouse cursor as SVG line objects. Find it posted at svg_cross_hairs.svg. If you load that file into FireFox and shorten the FireFox window down until scrollbars appear, and then scroll either the vertical or horizontal scrollbars, you will find that the crosshairs drawn by the Javascript are offset by the amount of either horizontal or vertical scrolling amount, which is not correct in order to draw a tooltip object on or near where the mouse cursor actually is.

I do see the Firefox: Get mouse coordinates of top-left corner of viewport question that talks about the scrollTop property.

msg#00056 clarifies that there is confusion of the meanings of element.{pageX,pageY,clientX,clientY} attributes and the element.getscreenCTM method.

Is there a cleaner way to arrive at the correct mouse coordinate, in the in user coordinate system?

Answer 1

You can use evt.pageX / evt.pageY or window.pageXOffset / window.pageYOffset to arrive at something that works even if the svg is scrolled.