Is this possible: Zoomable SVG Image Map

svg zooming imagemap
jpmorris picture jpmorris · Jun 13, 2011 · Viewed 14.4k times · Source

I would like to make a very big svg that is both a CLICKABLE image map and is ZOOMABLE. If I understand the html5 specs both of these seem possible, but no one mentions using both of these together. Are there any examples out there?

I don't want to use jquery and a jpg/png because I would like to stick to SVG. Any leads at all would be greatly appreciated.

Thank you!

Answer

Peter Collingridge picture Peter Collingridge · Jun 29, 2011

As user785194 says, you don't need to use HTML5, you can do it natively in SVG - you can do it all with EMCAScript inside the SVG itself. I've written a detailed description of how to do it here: http://www.petercollingridge.co.uk/interactive-svg-components/pan-and-zoom-control

Related questions

How to temporarily disable the zooming in d3.js

I am searching for a possibility to temporarily disable the zooming functionality provided by the d3 library. I tried to save the cave the current scale/translation values when the zooming is deactivated and set the zoom/translate-values when the …

Read More
SVG viewBox zoom in center (Raphael)

I try to zoom with mousewheel on a Raphael paper using viewBox. Here is the JSFiddle code. it works but now i want to zoom in the center and i have no idea where to start. I guess i should …

Read More
How to change the color of an svg element?

I want to use this technique http://css-tricks.com/svg-fallbacks/ and change the svg color but so far I haven't been able to do so. I put this in the css but my image is always black, no matter what. …

Read More