0

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>
4

1 に答える 1

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/ ; これが実際にバグである場合は、プラグインの作成者に送信する必要があります。

于 2012-04-11T21:07:03.123 に答える