svg 画地图
下载一个svgDeveloper软件，破解版下载
1、首先找一张地图作为绘制模板;（当然你也可以自己画，不准确怪我咯！）
2、新建svg文件：File --> New --> svg 点击ok;
3、修改svg画布大小,和使用的地图模板一致;
4、点击图片按钮,然后将鼠标移到画布左上角,一直拉到右下角,尽量使选中的区域与画布重合。松开鼠标，会自动弹出选择参考图片。
5、如果图片与画布未重合，使用键盘上的方向键移动图片，调好后，点一下黑色箭头。
6、抠取区域路径。
-- 为了轮廓更清晰，准确。我们放大到500%；
-- 选中钢笔，这个是点路径用的，把填充颜色调至无，边框蓝色（也可以是其他比较鲜艳的颜色，以便区分边界）；
-- 使用钢笔，在图片上选取路径，逐个点。如果点错了，就ctrl+z 撤销几步。点取过程中可以使用鼠标滚轮，和下面的滚动条调整显示区域。
7、给区域添加文字：选中text工具，在对应的位置上点击后输入文字，如果位置需要调整，可以修改代码中text标签里对应的x，y值，也可以，点击黑色箭头，选中文字后拖到对应位置。
8、给路径和文本框添加id属性，以便后面做效果使用。
9、最后保存为svg文件（注意：保存的时候是把图片模板也一起保存了的，在代码里找到image标签，删除即可）。
每次用画笔画完一段，记得点一下箭头1，重开一个path路径，以免路径重合
path 的 fill不可以设为none否则hover效果不生效， fill-opacity="0"设为0以免盖住背景
示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{ background: beige;}
path:hover{fill:#e88736;fill-opacity:1;}
</style>
</head>
<body> <!--width="231" height="304"-->
<svg width="231" height="304" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" stroke-width="1" stroke="#89C9FD">
<path />
<path />
<path />
<path />
<path />
<path />
<path />
<path />
<path />
<path />
<path />
<path />
</svg>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("path").each(function(){
$(this).bind('click',function(){
var $id = $(this).attr('id');
var dates = new Date();
alert($id)
})
})
</script>
</body>
</html>