SVGはRaphaelで奇妙にレンダリングされますか？

Question

Raphaelを使用してSVGを操作するオンラインデザイナーがいます。私たちはこれに使用する大きなクリップアートライブラリを用意していますが、非常に奇妙な問題に遭遇しています。

SVGの中にはブラウザでうまく表示される問題が発生していますが、一度それらをRaphaelにプルすると完全に認識できなくなります。

はここで効果を示す画像です：

そして、ここでは（.AIファイルからイラストレーターの輸出によって生成された）、SVGのコードです：

<?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/;これが本当にバグであれば、プラグインの作者に提出する必要があります。