将 SVG 图像路径转换为图像地图坐标？
我可以将 SVG 图像路径转换为图像地图坐标吗？
假设我有这个 SVG 图像
http://www.openclipart.org/people/ ArtFavor/anatomy26.svg
我想以某种方式将 SVG 中的路径转换为图像地图坐标 这样我就可以在 http://www.netzgesta.de/mapper/ 上制作效果/脚本它！！
这意味着我想在滚动该解剖结构的特定部分时产生突出显示效果（要使用的脚本不必是“映射器”，但我只是将其作为示例）
Can I convert SVG image paths to Image map coordinates?
Lets assume that I have this SVG Image
http://www.openclipart.org/people/ArtFavor/anatomy26.svg
i want to convert the paths in the SVG somehow to Imagemap coordinates
so i can make an effect/script http://www.netzgesta.de/mapper/ on it!!
Meaning i want to make that highlight effect when i roll on a specific part of that anatomy ( the script to be used doesn't have to be "mapper" but i just put it as an example)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我发现转换矢量/svg 图形的最精确方法是在 Adobe Illustrator 中打开矢量/eps 文件（我使用 Adobe Illustrator CC 2017）。
突出显示一条路径，然后在“属性”（在主菜单中，“窗口”>“属性”）中将“图像映射”字段设置为所需的形状。如果您要为文字贴图构建图像贴图，请选择“多边形”。您也可以选择设置“URL”字段。
一旦您浏览完每个形状并分配适用的属性，请转到主菜单“文件”>“出口>保存为 Web（旧版）。然后单击左下角的“预览”，这将在浏览器中打开窗口。在预览时，您可以查看图像下方的 HTML 图像映射代码。
注意：您的矢量/svg 形状必须是路径。因此，您可能必须释放复合路径（通过右键单击突出显示的形状并选择“释放复合路径”。
就 Adobe 中的计算而言，这不是很直观，但迄今为止，这是我弄清楚如何执行此操作的最准确方法。
Most precise way I've found to convert your vector/svg graphics is to open the vector/eps file in Adobe Illustrator (I used Adobe Illustrator CC 2017).
Highlight a path, and in the Attributes (in main menu, Window > Attributes) set "Image Map" field to desired shape. If you're building an image map for a literal map, then select "Polygon." You can optionally set the "URL" field too.
Once you go through each shape and assign applicable attributes, go to main menu, File > Export > Save For Web (Legacy). Then click on "Preview" in bottom left and that will open window in a browser. On preview you can view the HTML image map code below the image.
NOTE: your vector/svg shapes must be paths. So you may have to release compound paths (by right clicking highlighted shape and selecting "Release Compound Path."
Not very intuitive as far as figuring out in Adobe, but by far the most accurate way I've figured out how to do this.
您可能对此脚本感兴趣：creating-an-图像映射来自 svg
You might be interested by this script: creating-an-image-map-from-svg
我发现这个看起来非常有前途的指南。它使用名为Mapedit和Sea Monkey的程序，我相信这两个程序都是免费的。 http://socrtwo.info/image_map.htm编辑：
一种简单的方法来完成同样的事情是将
.PNG并使用 Inkscape，其不透明度类似于0.1，，其中包含相同的图片。任何突出显示的区域都可以从原始 SVG 中剪切，保存为 PNG 并夹在 div 之间以进行翻转等。 （我用这种方式制作了带有发光国家的世界地图，效果比预期的要好一些。
I found this very promising looking guide. It uses a program calledMapeditandSea Monkey, both of which I believe are free. http://socrtwo.info/image_map.htmEdit:
An easy way to accomplish the same thing is to
.PNGwith Inkscape<div>with opacity of something like0.1,<div>exactly under the mapped image with the same picture in it.Any highlighted areas can be clipped from the original SVG, saved as PNG and sandwiched between the divs for rollovers and whatnot. (I made world maps with glowing countries this way, and it worked a little better than expected.