将 SVG 图像路径转换为图像地图坐标？答案

【问题标题】：Convert SVG image path to Image Map coordinates?将 SVG 图像路径转换为图像地图坐标？
【发布时间】：2011-05-31 10:40:59
【问题描述】：

我可以将 SVG 图像路径转换为图像地图坐标吗？

假设我有这个 SVG 图像

http://www.openclipart.org/people/ArtFavor/anatomy26.svg
我想以某种方式将 SVG 中的路径转换为 Imagemap 坐标所以我可以在上面制作一个效果/脚本http://www.netzgesta.de/mapper/！！

意思是当我滚动到该解剖结构的特定部分时，我想制作高亮效果（要使用的脚本不必是“映射器”，但我只是将其作为示例）

【问题讨论】：

【解决方案1】：

我发现转换矢量/svg 图形的最精确方法是在 Adobe Illustrator 中打开矢量/eps 文件（我使用的是 Adobe Illustrator CC 2017）。

突出显示路径，并在“属性”（在主菜单中，“窗口”>“属性”中）将“图像映射”字段设置为所需的形状。如果您正在为文字地图构建图像地图，请选择“多边形”。您也可以选择设置“URL”字段。

完成每个形状并分配适用的属性后，转到主菜单，文件 > 导出 > 保存为 Web（旧版）。然后单击左下角的“预览”，这将在浏览器中打开窗口。在预览时，您可以查看图像下方的 HTML 图像映射代码。

注意：您的矢量/svg 形状必须是路径。因此，您可能必须释放复合路径（通过右键单击突出显示的形状并选择“释放复合路径”。

就在 Adobe 中进行计算而言不是很直观，但到目前为止，这是我想出的最准确的方法。

【讨论】：

【解决方案2】：

您可能对此脚本感兴趣：creating-an-image-map-from-svg

【讨论】：

【解决方案3】：

~~我发现这个很有前途的指南。它使用了一个名为Mapedit 和Sea Monkey 的程序，我相信这两个程序都是免费的。 http://socrtwo.info/image_map.htm~~

编辑：

完成同样事情的一个简单方法是

将您的图像保存为.PNG 和Inkscape
在Gimp打开，
- 添加 Alpha 通道，
- 删除任何应该清除的空白
魔法：
- 使用image-maps.com 映射您的图像，
- 将其设为<div>，其不透明度类似于0.1，
- 将<div> 正好放在其中包含相同图片的映射图像下方。

任何突出显示的区域都可以从原始 SVG 中剪裁出来，另存为 PNG 并夹在 div 之间以进行翻转等。（我用这种方法制作了带有发光国家的世界地图，效果比预期的要好一些。

【讨论】：