如何获取图片的SVG的数据

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

具体步骤

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

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

如何获取图片的SVG的数据_第1张图片

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

如何获取图片的SVG的数据_第2张图片

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

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

clip_image008

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

如何获取图片的SVG的数据_第3张图片

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

clip_image012

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

如何获取图片的SVG的数据_第4张图片

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

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


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


你可能感兴趣的:(jquery)