jquery - 从 svg 图像开始制作可链接的地图

Question

我有这个svg 图片。我会使用jQuery 的 mapHighlight 来实现看起来像这样的东西。最终的结果应该是可缩放的，没有太大的清晰度损失，第三个链接的质量还可以。我怎么能意识到这一点？在 mapHiglight 文档中，不处理 svg。

Answer 1

我不熟悉 jQuery mapHighlight，但从外观上看，您似乎没有从 SVG 中提取任何数据，您必须自己定义悬停区域。您可以使用一些脚本自动执行此操作，但有一种更简单且更强大的方法：只需使用 CSS：

polygon:hover {
  fill: #415262; 
}​

我不熟悉意大利的地理，但是如果几个多边形构成一个省的一部分，您可以将它们包装在一个<g>元素中，然后...

g:hover polygon {
  fill: #415262; 
}​

在此处查看演示：http: //jsfiddle.net/EaQjD/

Answer 2

如果你不想花太多时间来创建这样的地图，但你仍然想获得一些漂亮的东西，我可以推荐我的应用程序，它可以让你创建可点击的国家地图。

目前，该应用程序包含 16 个国家/地区，并且正在不断添加州和城市和地图。