Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I have a huge SVG document and I would like to be able to quickly navigate on this document using an accompanying thumbnail image, just like an image map with clickable areas . Like Photoshop’s Navigator palette (thx Phrogz)
The problem is that I have no idea how to navigate on the SVG document…
I was thinking of using named <g> tags in my SVG document that would be the link between the image to the SVG. Something like that.
Do you have any idea?
There are a variety of ways to accomplish this. Here’s what I would do:
Place your SVG contents in an
<svg>element within your document.Draw a rectangle over your thumbnail (which you might rasterize if your SVG file has a lot of data and drawing it scaled down causes poor performance).
Use JavaScript to detect clicks/drags in the thumbnail and move the rectangle over it.
Based on the ratio of the rectangle’s placement with respect to the thumbnail, adjust the
viewBoxattribute on your SVG contents.Actually, if it were me, I’d embed my SVG in XHTML and use one SVG document for the contents and either another SVG document for the thumbnail palette, or even just an HTML image and bordered div for the thumbnail.