将SVG图像路径转换为图像地图坐标?

问题描述 投票:4回答:3

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

假设我有这个SVG图片

http://www.openclipart.org/people/ArtFavor/anatomy26.svg我想以某种方式将SVG中的路径转换为Imagemap坐标这样我就可以在其上产生效果/脚本http://www.netzgesta.de/mapper/

意思是当我在那个解剖结构的特定部分滚动时,我想做出突出显示的效果(要使用的脚本不必是“ mapper”,但我只是作为示例而已]

svg imagemap
3个回答
1
投票

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


1
投票

[我发现要转换向量/ svg图形的最精确方法是在Adobe Illustrator中打开向量/ eps文件(我使用过Adobe Illustrator CC 2017)。

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

一旦遍历每个形状并分配了适用的属性,请进入主菜单,文件>导出>另存为Web(旧版)。然后单击左下方的“预览”,这将在浏览器中打开窗口。在预览时,您可以查看图像下方的HTML图像地图代码。

注意:向量/ svg形状必须是路径。因此,您可能必须释放复合路径(通过右键单击突出显示的形状并选择“发布复合路径”。

[在Adobe中不是很直观,但是到目前为止,我已经找到了最准确的方法。


0
投票

我发现这本非常有前途的指南。它使用一个名为MapeditSea Monkey的程序,我相信它们都是免费的。 http://socrtwo.info/image_map.htm

编辑:

完成同一件事的简单方法是

  1. 使用Inkscape将图像另存为PNG
  2. 在Gimp中打开,添加Alpha通道,删除所有空白应该清楚
  3. 魔术:使用image-maps.com映射您的图像,然后将其不透明度约为0.1的div,将div恰好位于带有相同图片的映射图像。

任何突出显示的区域都可以从原始SVG中剪切,另存为PNG,并夹在div之间以进行翻转和其他操作。 (我以此方式与发光的国家一起制作了世界地图,但效果比预期的要好一些。

© www.soinside.com 2019 - 2024. All rights reserved.