用于在 SVG 文档上导航的图像映射
我有一个巨大的 SVG 文档，我希望能够使用随附的缩略图快速浏览该文档，就像具有可单击区域的图像地图一样。就像 Photoshop 的导航器调色板（谢谢 Phrogz） ）
问题是我不知道如何在 SVG 文档上导航...
我正在考虑在我的 SVG 文档中使用命名的
你有什么想法吗？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有多种方法可以实现这一点。我会这样做：
将您的 SVG 内容放入文档中的
元素中。在缩略图上绘制一个矩形（如果您的 SVG 文件有大量数据，则可能会对其进行栅格化，并且按比例缩小会导致性能不佳）。
使用 JavaScript 检测缩略图中的点击/拖动并将矩形移至其上方。
根据矩形相对于缩略图的放置比例，调整 SVG 内容上的
viewBox属性。实际上，如果是我，我会 将我的 SVG 嵌入 XHTML 并使用一个 SVG 文档内容和缩略图调色板的另一个 SVG 文档，或者甚至只是缩略图的 HTML 图像和带边框的 div。
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.