Raphael JS：如何找到SVG图像的路径？

Question

Raphael JS：如何找到SVG图像的路径？

4

我使用GIMP获得了http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg中每个大陆的路径，但现在我无法弄清如何将此SVG文件转换为类似于https://github.com/thomaspeklak/raphaeljs-worldmap中的内容：

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

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);

-谢谢

- HaveFun MediaSolutions

我已经尝试使用GIMP输出SVG路径，但它与Raphael路径看起来不同。 - HaveFun MediaSolutions

你可以截图或者创建一个 jsfiddle，这样其他人就可以轻松地看到你当前的进展了。 - halfer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user56reinstatemonica8 · Accepted Answer

首先，您正在使用向量，因此在inkscape（“开源的Adobe Illustrator”）中比在gimp（“开源的Adobe Photoshop”）中获得更好的结果。

一个不错的第一步是将其导入Inkscape，使用Inkscape中与Illustrator的路径简化工具相当的工具（假设低文件大小比大多数维基百科SVG地图中非常详细的级别更重要-请注意它不会破坏国家边界），并导出为SVG。如果每个国家形状尚未拥有适当的ID（例如国家名称或国家代码），则您还可以在Inkscape中为其分配一个，以节省后来的时间。

然后，将其转换为Raphael逻辑，有三个选项：

使用Ready Set Raphael (rsr)，这是一个免费的SVG转Raphael转换器网络服务。除非rsr在我写这篇文章后有更新，否则您可能需要整理生成的代码：
- 通过在路径块之前放置paper.setStart();，并在其后放置var world = paper.setFinish();，将所有内容放入一个工作集中（不要忘记将paper替换为您正在使用的任何内容）。
- 除了设置id的任何重复的.attr()外，全部替换掉，然后像填充和描边这样的attr()应用于集合，而不是每个单独的元素。
- 将路径存储在对象中，以便轻松按名称访问。使与Raphael一起工作变得更加容易。
使用其他SVG到Raphael转换器或导入器（例如this one）。我不知道它们是否好用，我个人在Ready Set Raphael方面的经验更好。
只需手动完成。这可以简单地将每个SVG路径中的字符串从d="lots of co-ordinates"复制并粘贴到类似于var someCountry = paper.path("lots of co-ordinates"); someSet.push(someCountry);的东西中。由于有许多国家（大约170个），因此这将是耗时的，但长远来看，额外的控制可能会节省时间。

而且不要忘记从例子中学习。