Do you know if this will work if the element is contained in an HTML file? Does not look like it, as of yet…

Regards,
Corey.

My SVG will have nested SVGs, some of which are images, we need to be able to manually drag these images individually.

If I have multiple SVGs in with group/viewpoints only the first one found moves, what I could do with is a way the select the required SVG on mouseDown.

https://github.com/talos/jquery-svgpan/
http://talos.github.com/jquery-svgpan/demo.html

The main use case is for visualizations from SVG generators like d3:

http://mbostock.github.com/d3/

Thanks for putting this together!

This is a nice and very useful piece of work…

I am working on a project for a commercial client and would like to incorporate SVGPan.js into a rather specialized application which has no mouse, but only a very limited input device. We require simple zoom and pan driven by a simple JS function call into your library, rather than the current event handler methodology.

My question is this: Would you be interested in working with me, for pay, to make these modifications to the SVGPan.js for our specific use?

Thanks, and best regards,
Gary

Does the script tag have to be inside the SVG tag? I was hoping to have your library referenced outside the actual SVG because I’ll be dealing with dynamically generated SVG images that I need this functionality on.

Maybe there’s a clean way to modify the SVG with JS to add the script at the same time I am appending the embed tag to the DOM?

Thanks for sharing such a great library!

– Danny

I’m using graphviz with ‘tooltip’ entries to generate svg with objects like the following, using a xlink:title. Unfortunately, while SVGPan works very nicely without the xlinks, it fails completely with them.

foo

foo

this is great, but I can only get it to work when opening the svg by itself. If I load the SVG using the JQuery SVG plugin, I get this error when trying to zoom or pan. (I have created a group with id=”viewport”)

Uncaught TypeError: Object # has no method ‘createSVGPoint’
getEventPointSVGPan.js:133
handleMouseDownSVGPan.js:257
(anonymous function)8:1
onmousedown

Have you tried using your library with Jquery SVG?

thanks

I got something working for my situation. I have a world map that should take 100% of the browser width, but I have a viewbox=”0 0 1200 600″. The problem I faced is that resizing the browser window resizes the element just fine, but does not resize the element.

My solution was to add this onresize() handler. When the document is initialized I set initWidth and initHeight to the width and height of the viewbox (though in fact I cheated and hardcoded the viewbox values)

There’s a minor bug in my solution. When you resize the browser window, any pan/zoom you have done is reset.

function handleResize(evt){

var svgDoc = evt.target;
var g = getRoot(svgDoc);
/* BUG: on window resize, the scale is reset to 1.0 */
var scalex = g.parentElement.width.baseVal.value / initWidth;
var scaley = g.parentElement.height.baseVal.value / initHeight;
var k = root.createSVGMatrix().scale(scalex).multiply(g.getCTM().inverse());
setCTM(g, g.getCTM().multiply(k));
}

cheers,
dan