Raphael JS - 如何使用SVG文件

Question

我看到了几个帖子都提到了这个问题，但没有一个真正解决我的问题。我有一个包含地图和不同区域的SVG文件（http://www.mediafire.com/?5pmyevdwbyrb51f）。我想做类似于这样的事情：http://raphaeljs.com/australia.html。

但问题是如何将文件转换为脚本中可用的格式？我怎么获取那些坐标？我试过几个转换器之类的工具，但我肯定不擅长这个，因为无法让它工作。也许有人可以帮忙解决吗？

- larschanders

---

可能是SVG文件在Raphael中的重复问题，它们可以使用吗？ - Peter O.

Answer 1

如果您想使用Raphael导入SVG文件以便于显示或操作它，目前不支持此功能。但是您可以查看扩展raphael-svg-import或raphael-svg-import-classic。

另请参见SVG files in Raphael, can they be used?。

- Clafou

---

谢谢你的回答。虽然我已经尝试过它们，但是我无法让它们中的任何一个起作用。如果有人想尝试一下，我在我的第一篇帖子中有文件链接。不知道我做错了什么。我也尝试了不同的InkScape“设置”，但这不是我的强项... - larschanders

我也尝试了这里的转换器（https://github.com/wout/raphael-svg-import），但你需要写下整个SVG文件的内容，它不接受Inkscape生成的任何SVG格式。 - Marco Disce

Answer 2

看一下代码：

http://raphaeljs.com/tiger.html

<script src="tiger.js">
// Load the file with the tiger mapping to a variable
     var tiger = [0,0,600,600,{type:"path",path:"M-122.304 84.285C-12...
</script>

<script>
 // run it
 window.onload = function () {
    var r = Raphael(tiger).translate(200, 200);
 };
</script>

- fmsf

---

我不明白那如何帮助我。那个例子没有使用SVG文件？如果我现在很傻，请向我解释一下。问题是从我的文件中获取那些坐标（例如tiger.js中的坐标）。 - larschanders

使用这个解决方案，您需要将.svg文件作为.txt进行AJAX，并提取路径数据以提供给Raphael。实际上，这是一个相当不错的解决方案。 - netpoetica

这个答案只涵盖了问题的一小部分。SVG路径包含的内容远不止路径数据，而SVG文档包含的内容也远不止路径。 - sam hocevar

Answer 3

此外，除了mikefrey的答案使用rapper之外，这里有一个例子：

var paper = Raphael(0, 0, 160, 600);

var rappar = [...]; // here use the output from rappar

var graphic = paper.set();
rappar.forEach(function (item) {
  graphic.push(paper
    .path(item.path)
    .attr('fill', item.fill)
    .attr('stroke', item.stroke)
    // ...
  );
});
graphic.transform('s0.8,0.8,0,0');
// ...

使用 Raphael v2.2.6 和 rappar v0.0.2。

- Wtower