Zooming and Panning with Size and viewBox on root SVG element

[GoogleCodeExporter]

If you add a viewbox to the root SVG element and a size, which is common where 
the default view is to scale to fit, zooming and panning produce erratic 
behaviour.

The attached patch fixes this issue.  It requires the ViewBox.js library from 
http://www.kevlindev.com/gui/utilities/viewbox/index.htm 

Original issue reported on code.google.com by warren.s...@gmail.com on 4 Jan 2011 at 10:35

Attachments:

• viewboxZoomAndPan.patch

[GoogleCodeExporter]

There is an easier solution, with no need for an extra library.
Set a new transformation matrix to the first g based on current scale and 
remove the viewBox attribute from root. Add the SVGPan.js to the bottom of the 
script. So your setupHandlers will become:

function setupHandlers(root){
    setAttributes(root, {
        "onmouseup" : "add(evt)",
        "onmousedown" : "handleMouseDown(evt)",
        "onmousemove" : "handleMouseMove(evt)",
        "onmouseup" : "handleMouseUp(evt)",
        "onmouseout" : "handleMouseUp(evt)" // Decomment this to stop the pan functionality when dragging out of the SVG element
    });

        var g = root.getElementsByTagName('g')[0];
        setCTM(g, g.getCTM());
        root.removeAttribute("viewBox");

    if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0)
        window.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
    else
        window.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Others
} 

Original comment by saminsh...@gmail.com on 5 May 2011 at 9:28

[GoogleCodeExporter]

Integrated

Original comment by andrea.l...@gmail.com on 3 Jul 2011 at 10:43

• Changed state: Fixed

[GoogleCodeExporter]

Hi shams,

Followed the code modifications ..But still could not get out of the problem.

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1260 
1200" onload="init(evt)">

Above is the tag with view box in my code. In the code added to svgpan.js

  var g = root.getElementsByTagName('g')[0];
        setCTM(g, g.getCTM());
        root.removeAttribute("viewBox");

We are removing the viewbox attribute.. so on google chrome  the image is 
broken(height is being decreased) once I move the mouse  

Can you please help me with this(I could not use width and height since Im 
making it 
responsive.. If I specify height and width of svg ..im loosing responsive 
behavior)
If i remove the root.removeAttribute("viewBox") from code..height is not being 
changed but the problem is the zooming is behaving not as expected

Original comment by sivasank...@logicmatter.com on 22 Jan 2014 at 1:35

[GoogleCodeExporter]

Also following up, assume this project is dead by the lack of responses. Having 
same issue as others, with a viewBox declared once you mouse over the SVG it 
shrinks, and shrinks into nothing the more you try to do (pan, zoom).

After much experimentation I can't definitively put my finger on any particular 
problem. Source change above does not eliminate the behavior as noted by post 
#3.

Original comment by cp79sh...@gmail.com on 23 May 2014 at 9:36