SVG in HTML: Zoom doesn't go to the cursor (with fix using jQuery)

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create a html document containing a SVG element (not positioned in the top 
left corner!)
2. Try to zoom using the mousewheel

What is the expected output? What do you see instead?
The zoom should go "into" the cursor, like here: 
http://www.cyberz.org/projects/SVGPan/tiger.svg Instead, when zooming in, the 
image drifts away in one direction.

What version of the product are you using? On what operating system?
SVGPan library 1.2.2; Probably all browsers are affected.

The following seems to work, but needs jQuery and changes to SVGPan.js:

Change the function getEventPoint() to:

function getEventPoint(evt) {
    var p = root.createSVGPoint();

        var errorX = $("#mydiv").offset().left-$(window).scrollLeft();
        var errorY = $("#mydiv").offset().top-$(window).scrollTop();

    p.x = evt.clientX-errorX;
    p.y = evt.clientY-errorY;

    return p;
}

Whereas "mydiv" is the id of the div, containing the svg-tag.

Original issue reported on code.google.com by lukas.to...@htwchur.ch on 27 Feb 2012 at 5:43

[GoogleCodeExporter]

Perhaps related to issue 16?

Original comment by j...@mustardtechnology.com on 7 Mar 2012 at 9:42

[GoogleCodeExporter]

A simpler fix:

p.x = evt.layerX;
p.y = evt.layerY;

clientX and clientY are relative to the window, layerX and layerY are relative 
to the svg element.

Original comment by r...@cornell.edu on 13 Jul 2012 at 3:15

[GoogleCodeExporter]

Correction. Using layerX and layerY works in Safari, Chrome, Opera, and 
Firefox, but not in IE9, which seems to scale those values when the image is 
zoomed. This works in all of those browsers:

function getEventPoint(evt) {
    var s = evt.target.nearestViewportElement;
    if (!s) s = evt.target; // in the unlikely event that event targets the svg element itself
    var p = s.createSVGPoint();
    var ctm = s.getScreenCTM();
    p.x = evt.clientX - ctm.e;
    p.y = evt.clientY - ctm.f;
    return p;
}

Original comment by r...@cornell.edu on 13 Jul 2012 at 10:40

[GoogleCodeExporter]

I'm having the problem something like:
When dragging the svg object while in zoom out mode the cursor goes far from 
the object.

Original comment by saama...@gmail.com on 5 Nov 2012 at 8:12

[GoogleCodeExporter]

Hi, has this issue been resolved? I've tried all suggestions, still the cursor 
goes far from the object.

Original comment by i...@quorning.com on 17 Dec 2012 at 10:15

[GoogleCodeExporter]

@ #3

Thank you, this works much better!

Original comment by gilmar.a...@gmail.com on 21 Oct 2013 at 12:29

[GoogleCodeExporter]

Thank u sir

Original comment by arpitg...@gmail.com on 21 Oct 2013 at 4:49