由于地图的轮廓毫无规则，手动画出来是不可能了；

开始想的是直接用透明底的png图片，简单粗暴。但是图片缩放失真如何权衡，地图怎么做到精确锚点。所以作为一个有追求的码农还是选择放弃这个方案。

最后还是决定做成svg，客户给来的是一堆地图图片，毫无疑问我们要开始抠图了：

1、用PS把个个区块都抠出来（习惯用ps抠图），然后转成PS路径，就像这样

2、复制路径（选中路径ctrl+c就行）然后粘贴到AI里进行编辑（因为最终我们要输出svg所以AI比较合适）

一定要选中符合路径的模式导入

然后再对空路劲进行填充或编辑

3、编辑好之后另存为svg

4、我们要最终的svg是这样子的，path标签里的d="**"就是我们需要拿到的字符串串（当然地图是由多个path组成的，这里的一个path代表一个封闭的区域，比如在省地图中，深圳市和广州市就是分别的两个path）

5、提取所有的path存到对应的json中，后续每一个json就是一个大区域

6、引入d3.js进行页面渲染（svg图形界知名框架）

7、

...

...

************页面逻辑和交互编写************

...

...

20、神器一枚，在线svg编辑神器，简单的编辑能满足，挺好用《在线svg编辑神器》