1. 描述编辑

 
有的时候我们需要自定义地图,本文提供基本的基于SVG的矢量图制作教程;
 

2. 准备工作编辑

 
地图模板:例如需要自定义某个省份,挑选一张省份的地图图片即可,本文以吉林省地图为例jilin.png
SVGDeveloper:绘制矢量地图软件,这里提供1.0安装包,试用30天,如需激活,请自行购买SVGDeveloper1.0
SVG-Edit :绘制矢量地图的在线编辑器,官网地址,页面内有在线试用的地址或者也可以将编辑器下载到本地,SVG-Edit2.8
Inpaint:去水印软件,这里提供6.2安装包,如需激活,请自行购买Inpaint6.2
注:如果绘图功底很强无需地图模板也可以,SVGDeveloper1.0和SVG-Edit2.8二选一即可,Inpaint可选择性安装; 
另:教程内用到的软件版本,去水印软件——Inpaint6.2,绘制矢量地图软件SVGDeveloper1.0或者SVG-Edit2.8;如遇其他版本有操作不一致的地方请自行注意。
 

3. 去除地图模板上的水印(可跳过)编辑

 
一般我们找到的图片都会存在字或者各种水印,为了操作界面清晰,可以将图片上的其他文字去除
3.1 导入图片
点击文件>打开,选择jilin.png
根据去除水印处的区域大小,调整魔术笔大小,然后选择需要去除水印的区域,最后点击处理图像
依次去除图片上其他需要去除水印的区域,处理完成后,点击文件>另存为吉林.jpg
3.2 调整图片大小
为了适应浏览器预览时的大小,我们可以修改下图片尺寸
打开Windows自带的画图工具,使用其他如ps软件均可。点击主页>重新调整大小,保持纵横比,将高度调至合适高度,这里调整为530px
 

4. 方法一、SVGDeveloper编辑

 
打开SVGDeveloper,如果没有激活会提示需要激活,可以咨询激活,或者使用试用版,选择试用30天,点击继续即可
4.1 新建svg文件
点击file>new,选择svg,点击ok
修改svg画布大小,调至和要使用的图片模板一样大小
4.2 插入图片模板
点击工具栏上的图片,然后在画布上点击一下,会提示插入图片,选择刚刚处理好的吉林.jpg
修改插入的图片模板的坐标和宽度高度
调整好图片模板的位置和大小后,点击一下左上角的黑色箭头即可
4.3 扣取区域路径
为了轮廓更清晰、准确,将背景放大到500%
选中钢笔这个是点路径用的,填充颜色调至无,边框蓝色
注:如果不去掉填充颜色的话,抠图的时候会被填充色覆盖区域,影响抠图
使用钢笔,在图片上选取路径,逐个点。如果点错的话就ctrl+z 撤销几步。点取过程中可以使用鼠标滚轮,和下面的滚动条调整显示区域。
然后在结束的时候,钢笔显示圈,再点,这样就完成了一个封闭路径。在path 属性路径 最后会有一个Z这样表示结束
4.4 添加区域文字(可跳过)
注:添加区域文字是为了地图标识区域对应的市,这一步可以跳过,实际在我们的设计器导入后预览时不会显示区域文字,设计器里可以通过标签来显示对应的市
选中text 工具然后在对应的位置上点击后输入文字
上方会出现文本框的代码<text>这里也可以修改文本框内的文字,或者文本框的位置
4.5 添加id属性
在代码部分可以看到,路径和文本框内的id,根据区域名修改
之后就是逐个抠取各个区域,然后添加文字及id属性
所有区域都完成后,把比例缩小到100%
4.6 删除背景模板
绘制完成后,我们把背景模板删除,这里直接从svg代码将<image>这一行删除即可
最后我们可以根据配色方案修改区域的背景色或者边框颜色
制作完成后,保存为吉林.svg,这样我们的矢量地图就绘制完成了
4.7 导入制作完成的svg地图
自定义地图,导入刚刚绘制的吉林.svg
 

5. 方法二、SVG-Edit编辑

 
可以直接打开网页中的示例在线模板,或者将源码下载到本地,打开svg-editor.html即可
5.1 插入图片模板
点击Import Image导入背景模板
调整图片的位置,可以使用工具栏的x、y和宽度高度来修改
5.2 扣取区域路径
为了轮廓更清晰、准确,将图片放大一些;可以通过左下角的放大镜或者鼠标的滚轮来放大缩小图片,同时为了抠图清楚,可以设置线条的颜色为蓝色,宽度为2,背景色为空
点击path tool,在图片上选取路径,逐个点。
最后形成封闭的路径即可。
5.3 添加区域文字(可跳过)
注:添加区域文字是为了地图标识区域对应的市,这一步可以跳过,实际在我们的设计器导入后预览时不会显示区域文字,设计器里可以通过标签来显示对应的市
点击文本框A,然后在合适的位置上点击后输入文字
5.4 修改id属性
修改区域和文本框的id
之后就是逐个抠取各个区域,分别给区域加文字,然后给路径和文本框添加id属性
所有区域都完成后,把比例缩小到100%
5.5 将代码另存为
将制作好的svg地图的代码拷贝到本地的编辑器中,将文件另存为后缀为svg格式的地图,吉林2.svg
5.6 删除背景图片
将背景图片部分的代码<image>删除,然后保存即可
最后我们可以根据配色方案修改区域的背景色或者边框颜色,然后将修改后的代码保存到svg文件中即可
这样我们的矢量地图就绘制完成了。
5.7 导入制作完成的svg地图
自定义地图,导入刚刚绘制的吉林2.svg

使用svgdeveloper 和 svg-edit 绘制svg地图的更多相关文章

  1. 使用SVG绘制湖南地图

    项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...

  2. 绘制SVG内容到Canvas的HTML5应用

    SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...

  3. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  4. FireFox下Canvas使用图像合成绘制SVG的Bug

    本文适合适合对canvas绘制.图形学.前端可视化感兴趣的读者阅读. 楔子 所有的事情都会有一个起因.最近产品上需要做一个这样的功能:给一些图形进行染色处理.想想这还不是顺手拈来的事情,早就研究过图形 ...

  5. D3——绘制SVG图形-直方图

    1.创建SVG元素 var svg = d3.select("body").append("svg"); 2.为SVG元素设置属性 svg.attr() .at ...

  6. d3 根据数据绘制svg

    , , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...

  7. D3.JS V4 绘制中国地图

    参考:http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71 http://blog.csdn.net/lzhlzz/article/d ...

  8. Android 绘制中国地图

    最近的版本有这样一个需求: 有 3 个要素: 中国地图 高亮省区 中心显示数字 面对这样一个需求,该如何实现呢? 高德地图 因为项目是基于高德地图来做的,所以很自然而然的想到了高德.但是当查阅高德地图 ...

  9. 2. svg学习笔记-svg中的坐标系统和viewbox

    我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...

随机推荐

  1. CSUOJ 1341 String and Arrays

    Description 有一个N*N的字符矩阵,从上到下依次记为第1行,第2行,--,第N行,从左至右依次记为第1列,第2列,--,第N列.    对于这个矩阵会进行一系列操作,但这些操作只有两类:  ...

  2. Java拾遗补缺

    JDK9的lib目录下已经不再包含dt.jar和tool.jar.

  3. C语言学习常见错误分析

    错误分类     语法错 逻辑错 运行错 0.忘记定义变量: int main() { x=3;y=6;  printf("%d/n",x+y); } 1.C语言的变量一定要先定义 ...

  4. Jenkins 使用 maven 出现C:\Windows\system32\config\systemprofile的解决

    jenkins 使用 maven 出现 C:\Windows\system32\config\systemprofile 的原因是 Jenkins 服务启动的账号使用了系统的账号,在服务里改成具体的桌 ...

  5. HDU 5682 zxa and leaf 二分 树形dp

    zxa and leaf 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5682 Description zxa have an unrooted t ...

  6. A profile to detect when a SMS database has been changed

    http://webmail.dev411.com/t/gg/tasker/12bdddbsak/a-profile-to-detect-when-a-sms-has-been-sent A bela ...

  7. Maven根据不同环境打包不同配置文件

    开发项目时会遇到这个问题:开发环境,测试环境,生产环境的配置文件不同,打包时经常要手动更改配置文件,更改的少还可以接受,但是如果需要更多个配置文件,手动的方法就显得非常笨重了. 下面介绍一种方法,利用 ...

  8. Java-子类扩展父类功能

    class person {  private String name;  private int age;  public String getname(){   return this.name; ...

  9. AWR--service statistics

    近期发现一个奇怪的现象,数据库报告上看负载非常高.可是cpu和等待事件都非常低,不知道消耗的资源跑到哪里去了? Snap Id Snap Time Sessions Cursors/Session B ...

  10. Python机器学习实战&lt;一&gt;:环境的配置

    详细要学习的书籍就是<机器学习实战>Machine Learning in Action,Peter Harrington Windows下要安装3个文件,各自是; 1.Python(因为 ...