影像地图导航的SVG文件

我有一个巨大的SVG文件，我想能够使用附带的缩略图这份文件的快速导航，就像图像映射与可点击区域。像Photoshop's Navigator palette（THX Phrogz）影像地图导航的SVG文件

的问题是，我不知道如何在SVG文件浏览...

我想的是使用名为my SVG文件中<g>标签，这将是之间的联系图像到SVG。类似的东西。

你有什么想法吗？

2011-05-23 pasta

你真的想不同的可点击区域（如一个国家的地图，点击每个状态），还是要像[Photoshop的导航面板（http://livedocs.adobe.com/en_US/Photoshop/10.0/ help.html？content = WSfd1234e1c4b69f30ea53e41001031ab64-74dc.html），其中一个小方块显示您在整个图像中的位置？ – Phrogz 2011-05-23 15:23:06

是的，我喜欢它完全像Photoshop的导航器调色板。我在想我的SVG使用这样的标签：的，以及使用上的一些图像区域的链接像 pasta 2011-05-23 15:51:25

导航器调色板不像图像映射。没有独特的超链接。它使用整个缩略图中缩放矩形的像素位置来调整图像。 – Phrogz 2011-05-23 22:36:41

有各种各样的方式来做到这一点。这是我会做的：

将您的SVG内容放置在文档中的<svg>元素中。
画在你的缩略图矩形（其中，如果你的SVG文件有很多的数据你可能会栅格化和绘图它缩减会导致性能降低）。
使用JavaScript来检测点击/拖动缩略图和移动矩形了它。
根据矩形的位置与缩略图的比率，调整SVG内容的viewBox属性。

其实，如果是我，我会embed my SVG in XHTML和使用缩略图调色板中的一个内容SVG文件，要么另一个SVG文件，甚至只是一个HTML图像，并镶上DIV的缩略图。

来源

2011-05-23 22:41:04 Phrogz

非常感谢Phrogz的回答，我想我将不得不编写比预期更多的代码。我发现了一个可能会实现的技巧：carto.net/papers/svg/navigationTools/index.svg，我只需要将JPG图像更改为SVG – pasta 2011-05-24 07:44:19

影像地图导航的SVG文件

回答

相关问题