Raphael JS - 使用 SVG 文件答案

【问题标题】：Raphael JS - Use a SVG fileRaphael JS - 使用 SVG 文件
【发布时间】：2011-12-17 02:51:27
【问题描述】：

我已经看到了几个解决这个问题的线程，但没有什么能真正解决我的问题。我有一个带有地图和不同区域的 SVG 文件（http://www.mediafire.com/?5pmyevdwbyrb51f）。我想做这样的事情：http://raphaeljs.com/australia.html.

但问题是如何转换文件以便在脚本中工作？我如何获得这些坐标？我已经尝试了几个转换器等，但我必须忍受这个，因为我无法让它工作。也许有人可以帮忙？

【问题讨论】：

SVG files in Raphael, can they be used?的可能重复

标签： javascript svg raphael

【解决方案1】：

如果您的意思是使用 Raphael 导入 SVG 文件以便显示或操作它，则目前不支持。但您可能需要检查扩展名 raphael-svg-import 或 raphael-svg-import-classic。

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

【讨论】：

感谢您的回答。虽然已经尝试过，但无法让任何一个工作。如果有人觉得他们想试一试，我的第一篇文章中有指向我文件的链接。不知道我做错了什么。在 InkScape 中也尝试了不同的“设置”，但这不是我的一杯茶……
我也试过转换器here，但你需要写下你的svg文件的全部内容，它不会接受inkscape生成的任何svg格式。

【解决方案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>

【讨论】：

我看不出这对我有什么帮助。该示例不使用 SVG 文件？如果我现在很愚蠢，请向我解释。问题是从我的文件中获取这些坐标（如tiger.js 中的坐标）。
使用此解决方案，您必须将 .svg 文件中的 AJAX 转换为 .txt 并提取路径数据以提供给 Raphael。这实际上是一个相当不错的解决方案
这个答案只涵盖了问题的一小部分。 SVG 路径包含的远不止路径数据，而 SVG 文档包含的远不止路径。

【解决方案3】：

除了mikefrey's answer 使用说唱歌手，一个例子：

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。

【讨论】：