项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考。

1、首先准备一张湖南地图(仅有各市边界线即可)。(图片最好是PNG的,除了地图其它什么也没有)

2、准备SVG编辑工具SVGDeveloper

3、将图片导入SVGDeveloper编辑器中,将画布调整与图片大小一致

4、使用PEN将地图中各省勾出来,即可生成SVG中的PATH数据。

最终代码如下:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<!-- Created by SVGDeveloper 1.0 -->
<svg width="567" height="603" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" stroke="#FF0000">
<image x="0" y="0" width="567" height="603" xlink:href="C:\Users\Jack\Desktop\湖南地图C9.jpg" fill="none" stroke="#000000" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" />
<path d="M101 56C101 56 96 56 94 53C91 50 83 46 79 58C79 58 80 63 73 66C73 66 71 67 71 70C71 72 72 73 70 75C69 77 66 75 68 79C70 83 65 84 63 85C62 85 63 95 63 95C63 95 58 96 59 103C59 103 51 106 52 109C53 113 64 116 60 124C56.625 130.75 51.11426 128.2451 52.47794 139.9118C52.6042 140.992 52.78941 142.1938 53.0407 143.5356C53.29199 144.8774 53.60938 146.3594 54 148C54 148 61 154 49 162C49 162 44 167 59 166C59 166 65 166 55 177C55 177 53 189 55 198C57 208 72 192 61 212C61 212 51 227 60 227C60 227 63 227 58 235C53 243 55 257 61 261C67 265 65 259 65 258C65 258 69 250 76 253C76 253 88 256 88 247C88 247 87 237 96 235C96 235 99 223 105 231C111 238 116 239 127 238C127 238 131 244 135 237C139 230 139 226 140 219C140 219 145 219 149 212C152 205 143 208 148 193C148 193 151 192 142 186C142 186 134 180 144 169C144 169 154 162 155 157C155 157 155 145 166 140C166 140 168 134 165 131C162 128 154 117 155 113C156 110 157 100 141 101C141 101 137 103 139 93C139 93 142 88 124 86C124 86 121 87 124 80C126 73 113 76 112 78C110 80 105 75 103 61C103 61 102 56 101 56Z" fill="#F3CB91" fill-opacity="1" stroke="#000000" />
此处好多个path无法粘贴上来,有需要的可以联系我。
</svg>

转载于:https://www.cnblogs.com/dzlishen/p/4740156.html

使用SVG绘制湖南地图相关推荐

  1. three.js SVG 学习绘制三维地图

    three.js SVG 学习绘制地图 https://www.js-css.cn/jscode/other/other43/ 找到一个不错的资源,不过每个省份的svg数据太小了,不精确. 主要的是这 ...

  2. Android加载SVG实现交互式地图绘制

    Android加载SVG实现交互式地图绘制 Android加载SVG实现交互式地图绘制 效果图 实现思路 准备工作 具体实现 效果图 实现思路 下载SVG文件 将svg资源转换成相应的java代码 解 ...

  3. 使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

  4. qcustomplot绘制热力图瀑布图_使用REmap绘制中国地图

    上次我们介绍了使用ggplot2绘制中国热力地图,需要温习的同学可以点击以下链接 使用ggplot2绘制中国地图  .在使用ggplot2绘制的时候,需要进行数据处理的步骤比较多,今天我们介绍一个新的 ...

  5. 【Python 实战基础】 如何绘制中国地图展示省份GDP数据

    目录 一.实战场景 二.主要知识点 文件读写 基础语法 字符串处理 文件生成 数据构建 循环遍历 三.菜鸟实战 1.创建 python 文件 2.运行结果 一.实战场景 实战场景: 如何绘制中国地图展 ...

  6. echart湖南地图

    最近项目中用到echart地图组件,湖南地图完整版本(提供下坠功能),供大家参考. 1.对地图数据进行注册,制定mapId. echarts.registerMap(mapId,json坐标数据项); ...

  7. echarts 绘制中国地图(中英文转换)

    echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...

  8. 工具分享 | linemap-快速绘制山峦地图的R可视化包介绍

    公众号后台回复"图书",了解更多号主新书内容 作者:宁海涛 来源:DataCharm 上一次介绍了Python绘制svg的优秀可视化库Pygal,今天我们介绍一下一个优秀的R地图可 ...

  9. FLEX绘制行政区域地图源码

    FLEX 通过开源框架Degrafa绘制行政区域地图  以下是效果图 点击地图上城市区域部分会变蓝色提示并且有相应的选择特效 此地图是湖南省的部分城市地图 通过SVG工具抠出来的 实际效果链接: ht ...

  10. R绘制中国地图,并展示流行病学数据

    流行病学的数据讲究"三间分布",即人群分布.时间分布和空间分布.其中的"空间分布"最好是在地图上展示,才比较清楚.R软件集统计分析与高级绘图于大成,是最适合做这 ...

最新文章

  1. 计算机科学NIP,NIP自然语言处理主要应用在哪些领域呢?
  2. 你真的会用Android的Dialog吗?由一个Exception想到的
  3. Java爬虫技术(二)爬取京东iPhone商品信息并生成Json日志
  4. java 字段映射注解_mybatis注解开发中实体属性和表字段不对应问题
  5. 走进javascript——不起眼的基础,值和分号
  6. matlab 与数据库操作
  7. FPGA加法器时分复用减少逻辑资源
  8. “sudo: apt-get:找不到命令”的解决方法
  9. android 编译模块
  10. gevent实现套接字
  11. NumPy库—random模块
  12. python docx官网_Python操作docx文档
  13. java导航网站_java导航网站
  14. Unity编辑器扩展——在Editor下动态添加监听事件
  15. Mardown、LaTex编辑器推荐
  16. “相濡以沫,不如相忘于江湖”
  17. 测试脂肪的软件叫,智能健康监测app
  18. ST202EB_15KV ESD保护5V RS-232收发器,温度范围[-40℃, 85℃]——科时进商城
  19. sin(x) = x-x3/3!+x5/5!-x7/7!+...         输入x,计算上面公式的前10项和。
  20. 安徽省计算机考试算不算中考,安徽中考满分多少分2021

热门文章

  1. LeetCode--026--删除排序数组中的重复项(java)
  2. Hbase单机安装及使用hbase shell进行简单操作
  3. struts2 中的 addActionError 、addFieldError、addActionMessage方法的区别添加错误信息
  4. IOS开发之异步加载网络图片并缓存本地实现瀑布流(一)
  5. 缓存与缓冲的区别 Difference Between Cache and Buffer
  6. 分布式服务弹性框架“Hystrix”实践与源码研究(一)
  7. oracle 11g rac 环境(1)
  8. Delphi应用程序的调试(十)调试器选项
  9. vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则
  10. 【shell 练习5】编写简单的多级菜单