Comments on: SVGPan: a Javascript SVG (Viewer) Pan/Zoom/Drag library http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/ Andrea Leofreddi's homepage Thu, 15 Jul 2010 08:55:51 +0000 hourly 1 http://wordpress.org/?v=3.0.1 By: andrea http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/comment-page-1/#comment-88 andrea Thu, 15 Jul 2010 08:55:51 +0000 http://www.cyberz.org/blog/?p=96#comment-88 This library can only zoom and pan SVG documents This library can only zoom and pan SVG documents

]]> By: Bazley http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/comment-page-1/#comment-85 Bazley Wed, 07 Jul 2010 23:54:32 +0000 http://www.cyberz.org/blog/?p=96#comment-85 Hi, would it be possible to somehow apply this zoom and pan functionality to an image map such as these? http://raphaeljs.com/australia.html http://davidlynch.org/js/maphilight/docs/demo_usa.html I'm something of a newbie so getting this to work is a bit beyond me I'm afraid! Hi, would it be possible to somehow apply this zoom and pan functionality to an image map such as these?

http://raphaeljs.com/australia.html
http://davidlynch.org/js/maphilight/docs/demo_usa.html

I’m something of a newbie so getting this to work is a bit beyond me I’m afraid!

]]> By: vetzo http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/comment-page-1/#comment-82 vetzo Tue, 29 Jun 2010 18:32:02 +0000 http://www.cyberz.org/blog/?p=96#comment-82 thanks a lot, this is just what I need for my college paper for thematic mapping and svg :) thanks a lot, this is just what I need for my college paper for thematic mapping and svg :)

]]> By: andrea http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/comment-page-1/#comment-58 andrea Fri, 09 Apr 2010 20:23:18 +0000 http://www.cyberz.org/blog/?p=96#comment-58 Hello Sean, yes. Check out http://www.cyberz.org/projects/SVGPan/google.svg Hello Sean, yes. Check out http://www.cyberz.org/projects/SVGPan/google.svg

]]> By: Sean http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/comment-page-1/#comment-57 Sean Fri, 09 Apr 2010 13:14:43 +0000 http://www.cyberz.org/blog/?p=96#comment-57 Hmm, I'll do some more testing. I see you're on a Linux box. I'm on a Windows XP machine currently. Using: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1042 Safari/532.5 Opera/9.80 (Windows NT 5.1; U; en) Presto/2.5.22 Version/10.51 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (.NET CLR 3.5.30729) When I load that url I posted earlier the mouse wheel event is not zooming correct. Did the url work for you or did you download it and view it locally? Hmm, I’ll do some more testing. I see you’re on a Linux box. I’m on a Windows XP machine currently. Using:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1042 Safari/532.5

Opera/9.80 (Windows NT 5.1; U; en) Presto/2.5.22 Version/10.51

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (.NET CLR 3.5.30729)

When I load that url I posted earlier the mouse wheel event is not zooming correct. Did the url work for you or did you download it and view it locally?

]]> By: andrea http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/comment-page-1/#comment-56 andrea Thu, 08 Apr 2010 21:04:36 +0000 http://www.cyberz.org/blog/?p=96#comment-56 I made some tests and i got the following results: - Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.4) Gecko/20091027 Fedora/3.5.4-1.fc12 Firefox/3.5.4 is showing correct behaviour, can pan, zoom, drag the path element and the circle - Chrome 4.0.249.43 shows correct pan/zoom behaviour, can drag the path element but cannot drag the circle element. Looks like a click on the circle is not setting the proper event target element (instead the root svg element is passed to the event handler, issuing a screen pan) - browser bug? I made some tests and i got the following results:

- Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.4) Gecko/20091027 Fedora/3.5.4-1.fc12 Firefox/3.5.4 is showing correct behaviour, can pan, zoom, drag the path element and the circle
- Chrome 4.0.249.43 shows correct pan/zoom behaviour, can drag the path element but cannot drag the circle element. Looks like a click on the circle is not setting the proper event target element (instead the root svg element is passed to the event handler, issuing a screen pan) – browser bug?

]]> By: andrea http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/comment-page-1/#comment-55 andrea Thu, 08 Apr 2010 20:49:37 +0000 http://www.cyberz.org/blog/?p=96#comment-55 Hello Sean, it looks like svgpan gets confused by the viewBox attribute of the main SVG tag. Removing the viewbox attribute and giving a proper scale transformation gives a better result: <a href="http://www.cyberz.org/projects/SVGPan/google.svg" rel="nofollow">have a look here</a>. Andrea Hello Sean,
it looks like svgpan gets confused by the viewBox attribute of the main SVG tag. Removing the viewbox attribute and giving a proper scale transformation gives a better result: have a look here.

Andrea

]]> By: Sean http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/comment-page-1/#comment-54 Sean Thu, 08 Apr 2010 17:35:10 +0000 http://www.cyberz.org/blog/?p=96#comment-54 Hey Andrea, Sorry it took a day, my buddy changed the pw on our domain so I wasn't able to upload it until now. IE, Chrome, FF, and Opera all handle this differently it seems, and none are correct. This is just a simple example I've worked up that by its very nature seems to screw up Chrome, try adding an onmouseover to throw an alert on the circle or path and see what happens if you want. The circle radius and border-width on the paths are the actual values I use in my real application, but I've shrunk down the viewBox to enlarge the items further and really demonstrate my point. If you need, I can strip out one of my maps to just a map on an area as well. http://structuredchaosinc.com/google.svg Thank You, Sean Hey Andrea,
Sorry it took a day, my buddy changed the pw on our domain so I wasn’t able to upload it until now. IE, Chrome, FF, and Opera all handle this differently it seems, and none are correct. This is just a simple example I’ve worked up that by its very nature seems to screw up Chrome, try adding an onmouseover to throw an alert on the circle or path and see what happens if you want. The circle radius and border-width on the paths are the actual values I use in my real application, but I’ve shrunk down the viewBox to enlarge the items further and really demonstrate my point. If you need, I can strip out one of my maps to just a map on an area as well.
http://structuredchaosinc.com/google.svg
Thank You,
Sean

]]> By: andrea http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/comment-page-1/#comment-53 andrea Wed, 07 Apr 2010 18:38:15 +0000 http://www.cyberz.org/blog/?p=96#comment-53 Hello Sean, can you give a link with an example? Andrea Hello Sean,
can you give a link with an example?

Andrea

]]> By: Sean http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/comment-page-1/#comment-52 Sean Wed, 07 Apr 2010 17:17:58 +0000 http://www.cyberz.org/blog/?p=96#comment-52 Good Afternoon, I was actually working on something similar but kept running into issues. I've been trying to implement your script for a while this morning. I need something IE comparable so, unfortunately this script might not help. I've also run into some issues implementing the script in my svg images. They're actually maps using decimal degree coordinates for my units. I've run into this issue on Chrome, but it seems my numbers are too small for this script to calculate right. I have an example image I've created that breaks Chrome it seems. Don't know if I can post tags in here or if that will mess something up but the skinny is: 1) create a SVG image with viewBox="0 0 3 3" 2) create a circle cx=".3" cy=".3" r="0.2" 3) add an onmouseover="alert('over circle');" to the circle I can never get the action listener to fire. Plus when I use the mouse wheel on that, (either zoom in or out) the image will disappear. Can you please advice on what is going on here? Thank You, Sean Good Afternoon,
I was actually working on something similar but kept running into issues. I’ve been trying to implement your script for a while this morning. I need something IE comparable so, unfortunately this script might not help. I’ve also run into some issues implementing the script in my svg images. They’re actually maps using decimal degree coordinates for my units. I’ve run into this issue on Chrome, but it seems my numbers are too small for this script to calculate right. I have an example image I’ve created that breaks Chrome it seems. Don’t know if I can post tags in here or if that will mess something up but the skinny is:
1) create a SVG image with viewBox=”0 0 3 3″
2) create a circle cx=”.3″ cy=”.3″ r=”0.2″
3) add an onmouseover=”alert(‘over circle’);” to the circle

I can never get the action listener to fire. Plus when I use the mouse wheel on that, (either zoom in or out) the image will disappear. Can you please advice on what is going on here?
Thank You,
Sean

]]>