2012-05-04 11 views
4

私はhttp://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svgで各大陸のパスを取得しているが、今、私は(https://github.com/thomaspeklak/raphaeljs-worldmapから選んだ)のようなものには、このSVGファイルを変換する方法を把握することはできませんよGIMPの使い方:Raphael JS:SVG画像のパスを見つけるには?

あなたは、私が変換することができますどのように私を導いてくださいすることができRaphael PathへのSVGパス? GIMPより

africa.push(W.path("M13728 10231 c-34 -19 -84 -21 -109 -5 -6 4 -15 1 -19 -5 -5 -9 -14 -9 -35 1 -22 10 -29 10 -33 0 -2 -6 -11 -12 -21 -12 -9 0 -23 -6 -29 -12 -10 -10 -17 -10 -32 0 -27 16 -55 15 -190 -7 -113 -19 -180 -42 -180 -63 0 -5 -7 -8 -15 -5 -8 4 -17 2 -20 -3 -4 -6 -13 -10 -21 -10 -8 0 -26 -11 -40 -25 -14 -14 -30 -25 -37 -26 -25 -2 -62 3 -70 10 -4 4 -33 4 -65 0 -63 -9 -100 6 -109 42 -6 20 -20 24 -39 11 -6 -4 -22 -32 -35 -62 -34 -81 -57 -108 -119 -137 -60 -29 -120 -82 -120 -107 0 -9 -10 -31 -22 -47 -18 -24 -23 -44 -23 -94 0 -38 -5 -69 -12 -76 -7 -7 -13 -18 -13 -24 0 -5 -16 -24 -36 -40 -20 -17 -45 -38 -56 -48 -23 -21 -80 -47 -103 -47 -22 0 -36 -16 -62 -72 -13 -27 -27 -48 -31 -48 -27 0 -82 -82 -82 -123 0 -24 ") 
) 
    .attr(attr) 
    .scale(0.016963, -0.016963, 0,0) 
    .translate(0,-15000); 

-Thankあなた

+0

私はsvgパスを出力するためにGIMPを試しましたが、Raphaelパスとは異なって見えます。 –

+0

あなたはあなたが得ているものをスクリーンショットしたり、jsfiddleを作成して、人々があなたの現在の進歩を簡単に見ることができますか? – halfer

答えて

6

まず第一に、あなたがinkscapeでより良い結果(「オープンソースアドビイラストレーター」)を取得する可能性が高いですので、あなたは、ベクターで作業しています( 'オープンソースのAdobe Photoshop ')。

良い最初のステップは、Inkscapeにインポートすることです.InkscapeのIllustratorのパスシンプル化ツールに相当するものを使用してください(大部分のウィキペディアSVGマップのファイルレベルが低いほど重要です)国境を壊すことはありません)、SVGとしてエクスポートします。後で時間を節約するため、InkscapeにまだIDがない場合は、各国に適切なID(国名や国コードなど)を付けてもらいたい場合があります。

  1. 使用Ready Set Raphael (rsr)コンバータ Webサービスをラファエル無料SVGです:そして、ラファエル・ロジックにこれを有効にする

    、3つのオプションがあります。 (パスのブロックの後に前paper.setStart();var world = paper.setFinish();を置くことによって、作品セットでそれをすべてを置く

    • ドン:私はこれを書いたので、RSRが更新されていない限り、あなたはおそらく結果のコードを整理したいと思いますあなたが使っているものの代わりにpaperを置き換えることを忘れないでください)。
    • .attr()を複製したすべての要素を置き換えて、すべての要素を置き換えてください。その後、attr()は、個々の要素ではなく、塗りとストロークに似ています。
    • 名前で簡単にアクセスできるように、パスをオブジェクトに保存します。 Raphaelとの作業が非常に簡単になります。
  2. 使用ラファエルコンバータまたは輸入業者にいくつかの他のSVG(例えばthis one)。これらがいいかどうかわかりません。私は個人的にはReady Set Raphaelの経験が豊富です。

  3. ちょうど手で行う。これは、各SVGパスのd="lots of co-ordinates"からvar someCountry = paper.path("lots of co-ordinates"); someSet.push(someCountry);のような文字列をコピーして貼り付けるのと同じくらい簡単です。非常に多くの国(170人程度)がいるので時間がかかりますが、余分なコントロールは長期的には時間を節約する可能性があります。

そして、learn from examplesを忘れないでください。

+0

聖なるボール、+1 RSR! – Jason

+0

これは本当にすっきりしていますが、RSRにあまり依存しないでください。私が最初に使った時、私は "大変でした。私はこれらのパスとセットで何が起こっているかを正確に把握するのに時間を費やす必要はありません!"私が試したすべてはうまくいかなかった。それは、私がそれらの道とセットで何が起こっていたのか正確には分からなかったからです。コードを設定する方法は大部分の場合は大丈夫ですが、特定のケースではそれほど理想的ではありません。始めて、物事がどのように働くのかを見るのに良い。 – user568458

+0

が同意します。あなたは私のために幸いなことに、私はしばらくの間、raphaelを使ってきました;)私のために、これはカスタムSVGテキストを得るために非常に役立つでしょう(それはそうではありませんすでにフォント)をラファエルフォーマットに変換します。素晴らしい発見! – Jason

関連する問題