Raphael JS:如何查找SVG图像的路径? [英] Raphael JS: how to find path of an SVG image?

问题描述

使用GIMP，我已经在 http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg ，但现在我不知道如何将该SVG文件转换为类似的文件(摘自

Using GIMP I have obtained path of each continent in http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg but now I am not able to figure out how to convert this SVG file into something like (picked from https://github.com/thomaspeklak/raphaeljs-worldmap):

您能指导我如何将SVG路径转换为Raphael路径吗?

Can you please guide me how I can convert the SVG path to Raphael Path ?

africa.push(W.path("M13728 10231 c-34 -19 -84 -21 -109 -5 -6 4 -15 1 -19 -5 -5 -9 -14 -9 -35 1 -22 10 -29 10 -33 0 -2 -6 -11 -12 -21 -12 -9 0 -23 -6 -29 -12 -10 -10 -17 -10 -32 0 -27 16 -55 15 -190 -7 -113 -19 -180 -42 -180 -63 0 -5 -7 -8 -15 -5 -8 4 -17 2 -20 -3 -4 -6 -13 -10 -21 -10 -8 0 -26 -11 -40 -25 -14 -14 -30 -25 -37 -26 -25 -2 -62 3 -70 10 -4 4 -33 4 -65 0 -63 -9 -100 6 -109 42 -6 20 -20 24 -39 11 -6 -4 -22 -32 -35 -62 -34 -81 -57 -108 -119 -137 -60 -29 -120 -82 -120 -107 0 -9 -10 -31 -22 -47 -18 -24 -23 -44 -23 -94 0 -38 -5 -69 -12 -76 -7 -7 -13 -18 -13 -24 0 -5 -16 -24 -36 -40 -20 -17 -45 -38 -56 -48 -23 -21 -80 -47 -103 -47 -22 0 -36 -16 -62 -72 -13 -27 -27 -48 -31 -48 -27 0 -82 -82 -82 -123 0 -24 ")
  )
  .attr(attr)
  .scale(0.016963, -0.016963, 0,0)
  .translate(0,-15000);

-谢谢

推荐答案

首先，您正在使用向量，因此很可能在 inkscape (开源Adobe Illustrator")而不是gimp(开源Adobe Photoshop").

First of all, you're working with vectors, so you're likely to get better results in inkscape ('the open source Adobe Illustrator') than gimp ('the open source Adobe Photoshop').

一个好的第一步是将其导入到Inkscape中，使用与Inkscape等效的Illustrator的路径简化工具(假设在大多数Wikipedia SVG地图中，文件的大小比高度详细的信息更重要，请注意文件大小不重要-注意不要这样做)不会破坏国家/地区的边界)，并以SVG格式导出.您可能还希望在Inkscape中为每个国家/地区指定一个合适的ID(例如国家/地区名称或国家/地区代码)，以节省以后的时间.

A good first step would be import it into Inkscape, use whatever Inkscape's equivalent of Illustrator's path simplify tool is (assuming low file size is more important than the very high level of detail in most wikipedia SVG maps - be careful that it doesn't break country borders), and export as SVG. You might also want to give each country shape an appropriate ID (e.g. country name or country code) within Inkscape if they don't already have one already, to save time later.

然后将其转换为拉斐尔逻辑，有三种选择:

Then to turn that into Raphael logic, there's three options:

1. 使用准备就绪的Raphael(rsr)，它是免费的SVG到Raphael转换器 >网络服务.除非自从我撰写本文以来，rsr没有更新，否则您可能要整理一下生成的代码:

1. Use Ready Set Raphael (rsr) which is a free SVG to raphael converter web service. Unless rsr has been updated since I wrote this, you'll probably want to tidy up the resulting code:

• 通过将 paper.setStart(); 放在和之前，将其全部放入有效的集合中var world = paper.setFinish();在路径块之后(不要忘记将paper替换为正在使用的内容).
• 全部替换所有重复的.attr()，除了设置ID的所有ID，然后将诸如填充和描边之类的attr()应用于该集合，而不是每个单独的元素.
• 将路径存储在对象中，以方便按名称访问.使与Raphael的合作变得如此简单.

• Putting it all in a set that works, by putting paper.setStart(); before and var world = paper.setFinish(); after the block of paths (don't forget to substitute paper for whatever you're using).
• Replace-all away all the duplicated .attr()s except for any that set id, then apply attr()s like fill and stroke to the set, rather than each individual element.
• Store your paths in an object for easy access by name. Makes working with Raphael so much easier.

使用其他一些SVG到Raphael转换器或导入程序(例如这个).我不知道这些有什么用，我个人在Ready Set Raphael上有更好的经验.

Use some other SVG to Raphael converter or importer (e.g. this one). I don't know if these are any good, I've personally had better experiences with Ready Set Raphael.

别忘了从示例中学习.

这篇关于Raphael JS:如何查找SVG图像的路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！