使用svg画地图详细过程

您所在的位置:网站首页 地铁的地图怎么画 使用svg画地图详细过程

使用svg画地图详细过程

2024-06-18 19:12| 来源: 网络整理| 查看: 265

使用步骤 1.  安装svg 2.  具体操作

1.     打开svg,点击file ,new,默认svg,点击ok

显示界面如下:

然后点击image

把鼠标放到代码下面的的桌面上,鼠标箭头会变成一个十字,然后点击桌布,弹出窗口,让选择一个图片:

刚出来的时候,桌布上只能看到一个框框:

然后,右键桌布,在菜单中选择image

显示样式如下:

此时,为了便于操作,切换回鼠标,点击黑色鼠标就会变成鼠标样式了:

由于我们的地图需要放大,所以我们在开始的时候,就要把地图放大,这样在页面上才能更好的显示放大效果。需要调整桌布的宽高为4000,图片的宽高要根据最大的像素来调整小的像素的大小,保持比例不变,例如:

我当前的画布(就是svg标签内的宽高),都要修改为4000,然后计算image的宽高:最大像素是height=655,改为height=4000;那么width=582就应该改为:4000*582/655=3554,修改x轴y轴都为零,便于后面添加文字

修改后的样式如下:

我们在这个宽高的基础上,再放大200%或者以上,以防地图失真,放大在右下角,描点:

在描点之前,要设置一下背景,便于后面操作:

圈中部分,第一个颜色为背景色,第二个颜色为画笔演示,我们这里要把背景色修改为无(就是画笔的当前色),把画笔修改为一个明亮的颜色,比如蓝色:

画笔的宽度也可以修改,右边的1是默认值,大于1就是加粗,小于1就是变细,我们为了方便,修改为2

这样就可以开始描点了,点击pen:

随便选择一个地图的边线,然后就可以沿着边线,一路点击描点:

这里要注意一下:选中pen后,不能随便点击桌布,因为点击一下就是一个点,如果这个点与其它点不连贯,代码中就会多出一个path(path的数量会根据孤立的点或者线会有相应数量的增加),后面会出现一些不必要的麻烦。

中间如果画错的话,可以ctrl+z后撤,点到最后,要成闭环的时候,鼠标上面的+号会变成o,这样就表示闭环了。

缩小后可以看到是这个样子:

这个时候,把path中的id粘贴出来放到svg模板中,华中地图整体是阴影部分:

那么就把id中的内容拷贝出来放在对应的id中:

在浏览器中打开,可以查看:

完整样子:

然后就可以在这个的基础上画省份了,同样,要修改一下背景色和画笔颜色。

省份的边线要挨着阴影线画,如果觉得不好控制距离的话,可以放大倍率来画,我这里调整为300%,这么点着就可以稍微快一点了,闭环后,如法炮制,把d中的值拷贝到模板中子模块中,如河南:

地图模板.svg 模板信息:

亳州 阜阳 淮北 宿州 六安 淮南 黄山 蚌埠 合肥 滁州 芜湖 宣城 铜陵 马鞍山

上面的关键字含义如下:

现在开始添加省份信息,比如给河南省添加名称,并添加在地图的中央位置(美观):

切换为鼠标,点击桌面上显示河南的这一块连线,会显示如下样子:

可以看到中心有一个点,这个就是地图中心位置,鼠标移动的这个上面,可以看到svg工具下方有一个坐标地址,把这个坐标地址填写到 

河南

显示如下:

以上就是svg的基本使用方法。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3