SVG 与 Raphael 渲染异常？

Question

我们有一个使用 Raphael 来操作 SVG 的在线设计师。我们正在为此准备一个大型剪贴画库，但遇到了一个非常奇怪的问题。

一些 SVG 遇到了一个问题，它们在浏览器中渲染得很好，但是一旦我们将它们拉入 Raphael，它们就会变得完全无法识别。

这是显示效果的图片：

这里是 svg 的代码（由 .ai 文件的插图导出生成）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="83.641px" viewBox="0 0 100 83.641" enable-background="new 0 0 100 83.641" xml:space="preserve">
<polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 
    58.263,0.056 "/>
</svg>

Answer 1

您将文件导入路径的过程似乎存在缺陷，或者应用了一些无法解释的转换。例如，这段代码运行良好：

var paper = Raphael("paper");
paper.path(
    "M58.263,0.056 L100,41.85 L58.263,83.641 L30.662,83.641 " +
    "L62.438,51.866 L0,51.866 L0,31.611 L62.213,31.611 30.605,0"
).attr( { 'fill': 'black' } );

见http://jsfiddle.net/sgMH6/

如何将这些文件“拉”到 Raphael 中？你的流程/代码是什么？

编辑：更多信息；导入插件为https://github.com/wout/raphael-svg-import/blob/master/raphael-svg-import.js

您使用的插件似乎有一个错误的多边形实现例程。这是一种预感，但是，似乎 0 数字没有被正确处理。您的 SVG 图形确实包含一些零坐标。

在Raphael.fn.polygon函数中，有一段是这样的：

     var d = parseFloat(c[j]);
     if (d)
       poly.push(d);

如果你把它改成这个，它可能对你有用：

    var d = parseFloat(c[j]);
    if (!d) d = 0;
    poly.push(d);

这是一个非常基本的修复，它可能会破坏其他东西。无论如何，看看一个带有修改插件修复的工作示例 - http://jsfiddle.net/pkzGJ/ ；如果这确实是一个错误，您应该将其提交给插件作者。