SVGDeveloper制作矢量地图教程详解

た入场券 2023-05-29 06:51 21阅读 0赞

下面准备好环境之后就开始作图了。

一，首先我们需要找一张地图作为模板，找的模板地图尽量轮廓清晰。

下面我们就拿  吉林地图来作为模板。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper]][SVGDeveloper_SVGDeveloper]

二 为了适应 浏览器预览时的大小，我们需要把图片修改下尺寸

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 1]][SVGDeveloper_SVGDeveloper 1]

一般把高度跳至530px，宽度不用做什么调整。还有一点就是，尽量吧轮廓修清晰点。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 2]][SVGDeveloper_SVGDeveloper 2]

图片上的文字没啥影响，为了做个清晰的模板，我把文字都去掉。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 3]][SVGDeveloper_SVGDeveloper 3]

三

1接下来就是 使用svg软件制作适量图了，首先打开svg，新建svg文件。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 4]][SVGDeveloper_SVGDeveloper 4]

2 修改svg画布大小，调至和要使用的图片模板一样大小。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 5]][SVGDeveloper_SVGDeveloper 5]

吧宽高改成621 \*530

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 6]][SVGDeveloper_SVGDeveloper 6]

3插入图片模板

点击按钮，插入图片，然后在画布上选中区域，会提示插入图片。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 7]][SVGDeveloper_SVGDeveloper 7]

4点完按钮后，鼠标移至画板，会成一个十字，然后点画布左上角，拉到右下角，尽量把画布占慢重合。松开鼠标后会弹出选择背景图片。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 8]][SVGDeveloper_SVGDeveloper 8]

5打开后 图片和画布不重叠，可以使用键盘上的方向键移动图片。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 9]][SVGDeveloper_SVGDeveloper 9]

6调整好后点一下 黑色箭头。不要再乱动了。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 10]][SVGDeveloper_SVGDeveloper 10]

7现在背景图片调整好以后就是开始扣取区域路径了，也就是最主要的了。

为了轮廓更清晰，准确。我们放大到500%

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 11]][SVGDeveloper_SVGDeveloper 11]

8下面就是开始抠图了。

1 选中钢笔，这个是点路径用的，把填充颜色跳至无，边框蓝色（一般蓝色，为了教程清晰我设置为红色，还有如果不去掉填充颜色的话，抠图的时候会被填充色覆盖区域，影响抠图！！）

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 12]][SVGDeveloper_SVGDeveloper 12]

2，使用钢笔，在图片上选取路径，逐个点。如果点错的话就ctrl+z 撤销几步。点取过程中可以使用鼠标滚轮，和下面的滚动条调整显示区域。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 13]][SVGDeveloper_SVGDeveloper 13]

3如果点取的时候不小心，路径不连续了，如图。那么撤销几步

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 14]][SVGDeveloper_SVGDeveloper 14]

4然后钢笔 显示一个箭头的时候点一下那个点，就链接起来了，然后继续。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 15]][SVGDeveloper_SVGDeveloper 15]

5然后在结束的时候，钢笔显示圈，再点，这样就完成了一个封闭路径。在path 属性路径 最后会有一个Z,这样表示结束了。

![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 16]

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 17]][SVGDeveloper_SVGDeveloper 17]

6 给区域加文字。 选中text 工具。然后在对应的位置上点击后输入文字。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 18]][SVGDeveloper_SVGDeveloper 18]

下面圈住的的是文本框的IP 可以修改x，y值移动文字位置，如果觉得不合适的话。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 19]][SVGDeveloper_SVGDeveloper 19]

8，给路径和文本框添加id属性，一边以后报表数据接口对应。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 20]][SVGDeveloper_SVGDeveloper 20]

9，之后就是依法炮制，逐个扣取各个区域，然后添加文字及id属性。

10所有区域都完成后，把比例缩小。

可以先吧调用北京图片的这句去掉，然后给各个区域配色。

用箭头选中不同区域进行配色什么的也可以改变区域边框颜色。

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 21]][SVGDeveloper_SVGDeveloper 21]

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 22]][SVGDeveloper_SVGDeveloper 22]

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 23]][SVGDeveloper_SVGDeveloper 23]

path的属性中fill-opacity="0.5" 是填充的透明度，范围是0-1默认是1.

[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 24]][SVGDeveloper_SVGDeveloper 24]

11 最后保存

12 整理说明文档。 这样基本就完成了。  
  
[![\[转载\]SVGDeveloper制作矢量地图教程详解。][SVGDeveloper 25]][SVGDeveloper_SVGDeveloper 25]

[SVGDeveloper]: https://img-blog.csdnimg.cn/20191105133136320.gif
[SVGDeveloper_SVGDeveloper]: http://s14.sinaimg.cn/orignal/ac8bb807gdfa62489aa5d
[SVGDeveloper 1]: https://img-blog.csdnimg.cn/20191105133158818.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 1]: http://s14.sinaimg.cn/orignal/ac8bb807gdfa625106f1d
[SVGDeveloper 2]: https://img-blog.csdnimg.cn/20191105133213640.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 2]: http://s4.sinaimg.cn/orignal/ac8bb807gdfa629c1ae03
[SVGDeveloper 3]: https://img-blog.csdnimg.cn/20191105133233258.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 3]: http://s4.sinaimg.cn/orignal/ac8bb807gdfa62a03d563
[SVGDeveloper 4]: https://img-blog.csdnimg.cn/20191105133251982.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 4]: http://s3.sinaimg.cn/orignal/ac8bb807gdfa62a499ad2
[SVGDeveloper 5]: https://img-blog.csdnimg.cn/20191105133308891.jpg
[SVGDeveloper_SVGDeveloper 5]: http://s2.sinaimg.cn/orignal/ac8bb807gdfa62a517771
[SVGDeveloper 6]: https://img-blog.csdnimg.cn/20191105133322940.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 6]: http://s14.sinaimg.cn/orignal/ac8bb807gdfa62aa26b7d
[SVGDeveloper 7]: https://img-blog.csdnimg.cn/20191105133337899.jpg
[SVGDeveloper_SVGDeveloper 7]: http://s15.sinaimg.cn/orignal/ac8bb807gdfa62ace8f2e
[SVGDeveloper 8]: https://img-blog.csdnimg.cn/20191105133352177.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 8]: http://s13.sinaimg.cn/orignal/ac8bb807gdfa62b36b76c
[SVGDeveloper 9]: https://img-blog.csdnimg.cn/20191105133407108.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 9]: http://s5.sinaimg.cn/orignal/ac8bb807gdfa62b6459f4
[SVGDeveloper 10]: https://img-blog.csdnimg.cn/20191105133422142.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 10]: http://s5.sinaimg.cn/orignal/ac8bb807gdfa62be335a4
[SVGDeveloper 11]: https://img-blog.csdnimg.cn/20191105133437698.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 11]: http://s11.sinaimg.cn/orignal/ac8bb807gdfa62c592d8a
[SVGDeveloper 12]: https://img-blog.csdnimg.cn/20191105133451483.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 12]: http://s2.sinaimg.cn/orignal/ac8bb807gdfa62d077791
[SVGDeveloper 13]: https://img-blog.csdnimg.cn/20191105133506584.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 13]: http://s1.sinaimg.cn/orignal/ac8bb807gdfa62d3544f0
[SVGDeveloper 14]: https://img-blog.csdnimg.cn/20191105133527985.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 14]: http://s12.sinaimg.cn/orignal/ac8bb807gdfa62d630bbb
[SVGDeveloper 15]: https://img-blog.csdnimg.cn/20191105133543121.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 15]: http://s6.sinaimg.cn/orignal/ac8bb807gdfa62f43df75
[SVGDeveloper 16]: https://img-blog.csdnimg.cn/20191105133559457.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper 17]: https://img-blog.csdnimg.cn/20191105133614814.jpg
[SVGDeveloper_SVGDeveloper 17]: http://s1.sinaimg.cn/orignal/ac8bb807gdfa6314cee50
[SVGDeveloper 18]: https://img-blog.csdnimg.cn/20191105133630270.jpg
[SVGDeveloper_SVGDeveloper 18]: http://s10.sinaimg.cn/orignal/ac8bb807gdfa63eca8ca9
[SVGDeveloper 19]: https://img-blog.csdnimg.cn/20191105133646385.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 19]: http://s14.sinaimg.cn/orignal/ac8bb807gdfa63f9b22dd
[SVGDeveloper 20]: https://img-blog.csdnimg.cn/20191105133707603.jpg
[SVGDeveloper_SVGDeveloper 20]: http://s2.sinaimg.cn/orignal/ac8bb807gdfa63fbe6d71
[SVGDeveloper 21]: https://img-blog.csdnimg.cn/20191105133730295.jpg
[SVGDeveloper_SVGDeveloper 21]: http://s3.sinaimg.cn/orignal/ac8bb807gdfa64125cce2
[SVGDeveloper 22]: https://img-blog.csdnimg.cn/20191105133743777.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 22]: http://s5.sinaimg.cn/orignal/ac8bb807gdfa642a83a64
[SVGDeveloper 23]: https://img-blog.csdnimg.cn/20191105133756998.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 23]: http://s2.sinaimg.cn/orignal/ac8bb807gdfa641b63771
[SVGDeveloper 24]: https://img-blog.csdnimg.cn/2019110513382670.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 24]: http://s16.sinaimg.cn/orignal/ac8bb807gdfa642e1b8cf
[SVGDeveloper 25]: https://img-blog.csdnimg.cn/20191105133846204.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[SVGDeveloper_SVGDeveloper 25]: http://s12.sinaimg.cn/orignal/ac8bb807gdfa64351cd3b