2011-01-31 15 views
4

私はthis svg of europeをraphaelで描画しようとしています。 svg内の各パスについて、私はそれを解析して行いました:r.path([countrypath])。これは機能しますが、問題はそれが巨大であるということです。たとえば、パスの一部はM 11689.234, 6005.2561...のように見えます。500x500のキャンバスに近づくことさえありません。これをどのようにサイズ変更するのですか?ラファエロのスケール/翻訳はうまくいかないか、それを使用する方法がわかりません。私はSVGに各パスがあることに気づいたtransform="translate(5.875e-4,7.538462e-5)"何とかviewBoxを変更する必要がありますか? Raphaelに触れる前に、svgのパスを何とか変更しますか?RaphaelでSVGのサイズを変更する際のトラブル

答えて

2

このような少々の量の翻訳は少し無駄に思えますが、とにかく〜のように見えます。

はい、viewBoxを変更すると、SVGをサポートしているすべてのビューアで必要なものに合わせることができますが、raphael自体はviewBoxをサポートしていません(自分でVMLフォールバックを提供する必要があります)。

あなたの特定の用途に合うようにパスデータを前処理してください(とにかく、ファイルサイズを小さくするのに役立ちます、ウィキペディアのマップは通常かなり大きいです)、またはraphaelのスケール機能をscale the paths to a proper sizeに使用してください。

更新:Raphaëlv2.0以降では、viewBoxをサポートしています(setViewBox method経由)。

3

私は実際に昨日、世界の非常に大きなSVGを選び、それをSVGTOHTMLコンバータに送りました。 あなたはゼーヴェンが提供する規模プルトンに包まれた世界地図があります、私はこれらの中でも http://www.irunmywebsite.com/raphael/raphaelsource.php @ラファエルのためのリソースの全体の負荷を設定 http://www.irunmywebsite.com/raphael/svgsource.php

@ツールと関連した情報を見つけます!

20minute運動がうまくいけば、これはあなたを助けるか、将来的に同様の問題を持つ人になる... http://www.irunmywebsite.com/raphael/colourmap2.php

これを納入しました。 また、SVGエディタのパスを簡略化し、SVGTOHTMLコンバーターに入れる前にそれらのスケールを変更することもできます。 非常に多くの場合、マップは極端な詳細に描画できますが、マップを単純化するとパスの長さが大幅に短縮されます。

+0

もありますのhttp: //d-maps.com。ウィキペディアの地図とd-maps.comの世界地図に基づいて比較してみると面白いでしょう。 –

4

使用できるスケール(Xtimes、Ytimes、セントレックス、centreY)

あなたが0.2の画像が1/5

に低減されることになる選択した場合Xtimes、Ytimesが比例縮小している

centreX、centreYは0,0を選択する相対座標で、svgのすべてのパス/部分が均一かつ相対的に縮尺されます。

縮尺(0.2,0.2,0,0)を選択すると画像が適切になります1/5に減少

1

Raphael attribute「翻訳」は、x、yデルタを使用します。すなわち:

r.path([countryPath]).attr({translation:'-11689, -6005'}); 

複数のパスのためにそれをより再利用可能にするために、あなたはSVGパスにMからxとyの値を解析することができます。私がこれをしたとき、キャンバス上に送ったので、私のパスが正確に0にならないことが判明しました。あなたの要素の高さと幅に応じて調整を行うかもしれません。

3

パスを拡大縮小するには、.transform( "変換文字列")を使用するか、変換文字列をsww、hh、xx、yyにすることができます.wwとhhは、多くの場合、パスを拡大/縮小する必要があります。

.transform("s0.25,0.25,0,0"); 

あなたはEXAMPLE HEREまたは​​ を見つけるか、またはnがで紙全体を拡大縮小したいあなたによって金額です

paper.scaleAll(n); 

を使用することができます。最初のページにパスを作成し、多分半分に紙のオブジェクトをスケーリング

paper.scaleAll(0.5); 

あなたは下のリンクでScale.Raphaeljsライブラリ用のライブラリと例を見つけることができます。 Scale Raphael library

関連する問題