项目中有需求使用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>

使用SVG绘制湖南地图的更多相关文章

  1. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  2. 在echarts里在geojson绘制的地图上展示散点图(气泡)、线集。

    先来要实现的效果图: 下方图1是官网的案例:http://www.echartsjs.com/gallery/editor.html?c=scatter-map 下图2是展示气泡类型为pin的效果: ...

  3. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

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

    流行病学的数据讲究“三间分布”,即人群分布.时间分布和空间分布.其中的“空间分布”最好是在地图上展示,才比较清楚.R软件集统计分析与高级绘图于大成,是最适合做这项工作了.关于地图的绘制过程,谢益辉.邱 ...

  5. Android 绘制中国地图

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

  6. SVG Drawing Animation - SVG 绘制动画

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

  7. html 5新特性 --用SVG绘制的微信logo

    一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...

  8. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  9. svg绘制一个简单地饼图

    一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

随机推荐

  1. 【repost】js 常见错误类型

    1)SyntaxError SyntaxError是解析代码时发生的语法错误 // 变量名错误  var 1a;  // 缺少括号  console.log 'hello'); (2)Referenc ...

  2. jpa+springdata

    学习爱酷学习网尚硅谷springdata笔记: 1.在 Spring 配置文件 <?xml version="1.0" encoding="UTF-8"? ...

  3. PAT 1047. 编程团体赛(20)

    编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行给出一个正 ...

  4. 《Markdown 一些基本语法》

    Markdown编辑器是在上学期学习Java时写博客用来编辑文字内容以及形式的,但其实当时掌握Markdown的语法却是极少的,也仅仅是会使用几级标题这样简单的语法,就和当时学习git上传代码一样,也 ...

  5. 【已更新】【原创】Chrome53 最新版惊现无厘头卡死 BUG!

    发现问题 今天有客户向我们反馈了一个BUG:一个页面在IE.FireFox.Chrome52中能正常运行,但是在最新版的Chrome53中显示不了??? 习惯性的,我们需要客户提供页面在浏览器中的HT ...

  6. EntityFramework、Dapper vs 草根框架性能大比拼,数据库访问哪家强?

    扯淡 当前市面上 ORM 很多,有跑车型的,如 Dapper,有中规中矩型的,如 Mybatis.Net,也有重量型的,如 EntityFramework 和 NHibernate,还有一些出自草根之 ...

  7. JAVA+Maven+TestNG搭建接口测试框架及实例

    1.配置JDK 见另一篇博客:http://www.cnblogs.com/testlurunxiu/p/5933912.html 2.安装Eclipse以及TestNG Eclipse下载地址:ht ...

  8. PHP 的 foreach

    foreach 可以 针对 string 操作,不过会生成一个警告,并跳过该 expression, 举例: $ids = '123'; foreach ($ids as $item){ print_ ...

  9. js 闭包

    this.color = "blue"; (function(_this) { setInterval(function() { if (_this.color !== " ...

  10. 解决SmartGit序列号问题

    SmartGit过了30天试用期之后,就需要用户输入序列号才能继续使用,有一个办法可以跳过输入序列号. 一.windows+R  输入:%APPDATA%\syntevo\SmartGit 二.打开7 ...