从svg图像开始制作可点击的地图

Question

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

Answer 1

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

polygon:hover {
  fill: #415262; 
}​

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

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

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

Answer 2

如果你不想花太多时间创建这样的地图，但你仍然想要实现美好的东西，我可以推荐我的应用程序，让你create clickable country maps。

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