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

Question

我有一个巨大的 SVG 文档，我希望能够使用随附的缩略图在此文档上快速导航，就像带有可点击区域的图像映射一样。喜欢Photoshop's Navigator palette（谢谢 Phrogz）

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

我正在考虑在我的 SVG 文档中使用名为 <g> 的标签，这将是图像与 SVG 之间的链接。类似的东西。

你有什么想法吗？

Answer 1

有多种方法可以做到这一点。这就是我要做的：

1. 将 SVG 内容放在文档中的 <svg> 元素中。

2. 在您的缩略图上绘制一个矩形（如果您的 SVG 文件包含大量数据并且按比例缩小会导致性能不佳，您可能会对其进行栅格化）。

3. 使用 JavaScript 检测缩略图中的点击/拖动，并将矩形移到上面。

4. 根据矩形相对于缩略图的位置比例，调整 SVG 内容的 viewBox 属性。

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