4

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

你能指导我如何将 SVG 路径转换为 ​​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);

-谢谢

4

1 回答 1

7

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

一个好的第一步是将其导入 Inkscape，使用 Inkscape 的 Illustrator 路径简化工具的等价物（假设在大多数 wikipedia SVG 地图中，低文件大小比非常高的细节水平更重要 - 注意它不会破坏国家边界），并导出为 SVG。您可能还想在 Inkscape 中为每个国家形状提供一个适当的 ID（例如国家名称或国家代码），如果他们还没有，以节省以后的时间。

然后把它变成拉斐尔逻辑，有三个选择：

  1. 使用Ready Set Raphael (rsr)，这是一个免费的 SVG 到 raphael 转换器Web 服务。除非在我写这篇文章后 rsr 已经更新，否则您可能需要整理生成的代码：

    • paper.setStart();通过将路径块放在路径块之前和var world = paper.setFinish();之后（不要忘记替换paper您正在使用的任何内容），将它们全部放在一个有效的集合中。
    • 将所有重复.attr()的 s 全部替换掉​​，除了任何设置 idattr()的 s，然后将诸如填充和描边之类的 s 应用于集合，而不是每个单独的元素。
    • 将路径存储在对象中，以便按名称轻松访问。使与 Raphael 的合作变得更加容易。

  2. 使用其他一些 SVG 到 Raphael 转换器或导入器（例如这个）。我不知道这些是否有好处，我个人对Ready Set Raphael有更好的体验。

  3. 只需手动完成。这可以像将字符串d="lots of co-ordinates"从每个 SVG 路径复制并粘贴到类似var someCountry = paper.path("lots of co-ordinates"); someSet.push(someCountry);. 这将很耗时，因为有这么多国家（大约 170 个），但从长远来看，额外的控制可能会节省时间。

并且不要忘记从示例中学习。

于 2012-05-07T12:28:25.710 回答