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

使用GIMP我已获得每个大洲的路径http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg但现在我无法弄清楚如何将这个SVG文件转换成类似（从https://github.com/thomaspeklak/raphaeljs-worldmap采摘）：Raphael JS：如何查找SVG图像的路径？

能否请你指导我如何我可以转换到Raphael Path的SVG路径？

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

- 谢谢

来源

2012-05-04 HaveFun MediaSolutions

我已经尝试GIMP输出svg路径，但它看起来不同于拉斐尔路径。 –

你会截图吗？或者创建一个jsfiddle，以便人们可以轻松看到你当前的进度？ – halfer

首先，你与向量工作，所以你可能会得到更好的结果在inkscape（“开源Adobe Illustrator的”）比GIMP（下称“开源Adobe Photoshop'）。

一个好的第一步就是将它导入到Inkscape中，使用任何Inkscape的Illustrator路径简化工具等价物（假设低文件大小比大多数维基百科SVG地图的高级别细节更重要 - 小心它不会破坏国家边界），并以SVG格式导出。您也可能希望在Inkscape中为每个国家/地区设置一个适当的ID（例如，国家或国家代码）（如果它们还没有），以节省时间。

然后把这一拉斐尔逻辑，有三个选项：

使用Ready Set Raphael (rsr)这是一个免费SVG拉斐尔转换器 Web服务。除非因为我写这RSR已经更新，你可能会想收拾结果代码：
- 把他们放在一组这样的作品，通过把paper.setStart();之前和var world = paper.setFinish();的路径块后（唐别忘了用paper代替你使用的任何东西）。
- 替换 - 全部删除所有重复的.attr() s，除了设置为id的任何设置，则应用attr()（如fill和stroke）到设置，而不是每个单独的元素。
- 将您的路径存储在一个对象中以方便按名称访问。与Raphael合作非常容易。
使用一些其他SVG到圣拉斐尔变换器或进口商（例如this one）。我不知道这些是否有好处，我个人对Ready Set Raphael有更好的体验。
只需用手做。这可以像将来自每个SVG路径的d="lots of co-ordinates"的字符串复制并粘贴到类似var someCountry = paper.path("lots of co-ordinates"); someSet.push(someCountry);的东西一样简单。由于有这么多的国家（170个左右），这将是非常耗时的，但从长远来看，额外的控制可能会节省时间。

而且别忘了learn from examples。

来源

2012-05-07 12:28:25 user568458

圣球，RSR +1！ – Jason

它确实很整洁，但不要过度依赖RSR。当我第一次使用它的时候，我就说：“太好了，我不需要花时间弄清楚这些路径和设置究竟发生了什么！”。然后，我试过的一切都不起作用。原来是因为我不知道这些路径和集合到底发生了什么。在大多数情况下，它设置代码的方式是可以的，但对于任何一种特定情况，这往往意味着不太理想。良好的开始和看到事情如何工作。 – user568458

同意。你一定要知道你在用什么方式进行潜水之前。幸运的是，我一直在使用raphael一段时间;）对于我来说，这对于获得自定义svg文本是非常有帮助的（那不是已经是一个字体）转换成拉斐尔格式。很棒的发现！ – Jason

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

回答

相关问题