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/

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

修改：更多信息;导入插件是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/;如果这确实是一个错误，你应该将它提交给插件作者。