SVGDeveloper制作矢量地图教程详解
下面准备好环境之后就开始作图了。
一,首先我们需要找一张地图作为模板,找的模板地图尽量轮廓清晰。
下面我们就拿 吉林地图来作为模板。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper
二 为了适应 浏览器预览时的大小,我们需要把图片修改下尺寸
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 1
一般把高度跳至530px,宽度不用做什么调整。还有一点就是,尽量吧轮廓修清晰点。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 2
图片上的文字没啥影响,为了做个清晰的模板,我把文字都去掉。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 3
三
1接下来就是 使用svg软件制作适量图了,首先打开svg,新建svg文件。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 4
2 修改svg画布大小,调至和要使用的图片模板一样大小。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 5
吧宽高改成621 *530
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 6
3插入图片模板
点击按钮,插入图片,然后在画布上选中区域,会提示插入图片。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 7
4点完按钮后,鼠标移至画板,会成一个十字,然后点画布左上角,拉到右下角,尽量把画布占慢重合。松开鼠标后会弹出选择背景图片。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 8
5打开后 图片和画布不重叠,可以使用键盘上的方向键移动图片。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 9
6调整好后点一下 黑色箭头。不要再乱动了。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 10
7现在背景图片调整好以后就是开始扣取区域路径了,也就是最主要的了。
为了轮廓更清晰,准确。我们放大到500%
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 11
8下面就是开始抠图了。
1 选中钢笔,这个是点路径用的,把填充颜色跳至无,边框蓝色(一般蓝色,为了教程清晰我设置为红色,还有如果不去掉填充颜色的话,抠图的时候会被填充色覆盖区域,影响抠图!!)
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 12
2,使用钢笔,在图片上选取路径,逐个点。如果点错的话就ctrl+z 撤销几步。点取过程中可以使用鼠标滚轮,和下面的滚动条调整显示区域。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 13
3如果点取的时候不小心,路径不连续了,如图。那么撤销几步
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 14
4然后钢笔 显示一个箭头的时候点一下那个点,就链接起来了,然后继续。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 15
5然后在结束的时候,钢笔显示圈,再点,这样就完成了一个封闭路径。在path 属性路径 最后会有一个Z,这样表示结束了。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 17
6 给区域加文字。 选中text 工具。然后在对应的位置上点击后输入文字。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 18
7
下面圈住的的是文本框的IP 可以修改x,y值移动文字位置,如果觉得不合适的话。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 19
8,给路径和文本框添加id属性,一边以后报表数据接口对应。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 20
9,之后就是依法炮制,逐个扣取各个区域,然后添加文字及id属性。
10所有区域都完成后,把比例缩小。
可以先吧调用北京图片的这句去掉,然后给各个区域配色。
用箭头选中不同区域进行配色什么的也可以改变区域边框颜色。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 21
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 22
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 23
path的属性中fill-opacity=”0.5” 是填充的透明度,范围是0-1默认是1.
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 24
11 最后保存
12 整理说明文档。 这样基本就完成了。
![[转载]SVGDeveloper制作矢量地图教程详解。]SVGDeveloper_SVGDeveloper 25
分享:
还没有评论,来说两句吧...