Image 用于在SVG文档上导航的图像映射

我有一个巨大的SVG文档，我希望能够使用附带的缩略图快速浏览该文档，就像带有可单击区域的图像地图一样。Like（thx Phrogz）

问题是我不知道如何在SVG文档上导航

我正在考虑在SVG文档中使用命名的

标记，作为图像与SVG之间的链接。差不多吧

---

你有什么想法吗？

实现这一点有多种方法。下面是我要做的：

将SVG内容放在文档中的

元素中

在缩略图上绘制一个矩形（如果SVG文件包含大量数据，则可能会将其光栅化，并将其缩小会导致性能不佳）

使用JavaScript检测缩略图中的点击/拖动，并在其上移动矩形

根据矩形相对于缩略图的位置比率，调整SVG内容上的

viewBox

属性

---

事实上，如果是我，我会使用一个SVG文档作为内容，或者使用另一个SVG文档作为缩略图调色板，甚至只使用HTML图像和带边框的div作为缩略图。

有多种方法可以实现这一点。下面是我要做的：

将SVG内容放在文档中的

元素中

在缩略图上绘制一个矩形（如果SVG文件包含大量数据，则可能会将其光栅化，并将其缩小会导致性能不佳）

使用JavaScript检测缩略图中的点击/拖动，并在其上移动矩形

根据矩形相对于缩略图的位置比率，调整SVG内容上的

viewBox

属性

---

事实上，如果是我，我会使用一个SVG文档作为内容，或者使用另一个SVG文档作为缩略图调色板，甚至只使用HTML图像和带边框的div作为缩略图。

你真的想要不同的可点击区域（比如国家地图，点击每个州），还是想要类似，在一个小框中显示您在整个图像中的位置？是的，我希望它与Photoshop的navigator调色板完全相同。我想在我的SVG中使用这样的标记，并在一些图像区域上使用链接，如，但这不起作用。需要任何简单的类似或更多的编码吗？Thx，Antoine导航调色板不像图像地图。没有明显的超链接。它使用缩放矩形在整个缩略图中的像素位置来调整图像。您真的想要不同的可单击区域（如国家地图，单击每个州），还是想要一个小框显示您在整个图像中的位置？是的，我希望它与Photoshop的导航调色板完全相同。我想在我的SVG中使用这样的标记，并在一些图像区域上使用链接，如，但这不起作用。需要任何简单的类似或更多的编码吗？Thx，Antoine导航调色板不像图像地图。没有明显的超链接。它使用缩放矩形在整个缩略图中的像素位置来调整图像。非常感谢Phrogz的回答，我想我将不得不编写比预期更多的代码。我发现了一个可能会起作用的例子：carto.net/papers/svg/navigationTools/index.svg，我只需要将JPG图像更改为svg谢谢你的回答，我想我必须编写比预期更多的代码。我发现了一个可能实现这一目的的示例：carto.net/papers/svg/navigationTools/index.svg，我只需将JPG图像更改为svg即可