如何获取图片的SVG的数据

相关软件:svgDeveloper 1.0(仅试用期一个月),Photoshop

具体步骤

寻取合适的地图图片,可以网络上寻找相关的地图数据,而我们的中国地图如下所示:

1、为了符合一致大小,请将图片的大小在photoshop或者其他图像处理软件中进行处理,将其大小修改成740宽、480宽。(注:单位都为像素)

clip_image004

2、打开svgDeveloper,新建一个Svg文件

clip_image006

3、在以下代码中,修改宽度和长度为740、480

<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

4、下面准备将图片插入至svgDeveloper中,点击工具栏中的Image按钮

clip_image008

鼠标呈十字状,在操作界面上进行拉框,一般拉满整个屏幕,结束后,会提示选择图片,此时,选择处理后的图片,点确定即可

clip_image010

5、下面进行数据采集,适当放大图片后,点击钢笔工具

clip_image012

此时鼠标呈钢笔形状,此时依次在地图上沿着边界线进行点选择,注意的是,最好选择好合适的填充颜色 ,尤其注意透明度的选择,这样可以在选面时,避免纯色而无法看清边界线。

clip_image014

依次在地图上进行点选择,并最终形成一个闭合的圈,此时,可以在代码区域找到以下代码:

<path d="M355 304L355.25 303.75L362 310L364 310L371 304L374 296L376 290C376 290 376 288 378 288C379 288 383 288 383 288L388 290L390 292C390 292 394 293 394 294C396 294 399 298 399 298L401 301L399 304L394 307L391 308L384 309L384 313L384 316L386 320L388 323L391 328L392 335L392 339L389 338L384 331L383 327L378 326L375 328L371 333L367 335L362 334L358 333L359 328L354 322L354 315L355 310Z" fill="#000000" fill-opacity="0.2" stroke="none" stroke-opacity="0" />

而相应的path 中的d信息即为我们所用,须注意的是,有时候可能线圈并没有闭合,此时,最后结束的字符可能没有Z,此时,可以人工给添加上“Z”


相关阅读:SVG是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值