私は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のサイズを変更する際のトラブル
答えて
このような少々の量の翻訳は少し無駄に思えますが、とにかく〜のように見えます。
はい、viewBoxを変更すると、SVGをサポートしているすべてのビューアで必要なものに合わせることができますが、raphael自体はviewBoxをサポートしていません(自分でVMLフォールバックを提供する必要があります)。
あなたの特定の用途に合うようにパスデータを前処理してください(とにかく、ファイルサイズを小さくするのに役立ちます、ウィキペディアのマップは通常かなり大きいです)、またはraphaelのスケール機能をscale the paths to a proper sizeに使用してください。
更新:Raphaëlv2.0以降では、viewBoxをサポートしています(setViewBox method経由)。
私は実際に昨日、世界の非常に大きな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コンバーターに入れる前にそれらのスケールを変更することもできます。 非常に多くの場合、マップは極端な詳細に描画できますが、マップを単純化するとパスの長さが大幅に短縮されます。
使用できるスケール(Xtimes、Ytimes、セントレックス、centreY)
あなたが0.2の画像が1/5と
に低減されることになる選択した場合Xtimes、Ytimesが比例縮小しているcentreX、centreYは0,0を選択する相対座標で、svgのすべてのパス/部分が均一かつ相対的に縮尺されます。
縮尺(0.2,0.2,0,0)を選択すると画像が適切になります1/5に減少
Raphael attribute「翻訳」は、x、yデルタを使用します。すなわち:
r.path([countryPath]).attr({translation:'-11689, -6005'});
複数のパスのためにそれをより再利用可能にするために、あなたはSVGパスにMからxとyの値を解析することができます。私がこれをしたとき、キャンバス上に送ったので、私のパスが正確に0にならないことが判明しました。あなたの要素の高さと幅に応じて調整を行うかもしれません。
パスを拡大縮小するには、.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
- 1. jQueryでRaphael SVGイメージを変更する
- 2. サイズ変更後にsvgイメージを実際のサイズにする
- 3. Raphael JSサイズ変更可能な矩形
- 4. Javaのパネルでsvgのサイズを変更
- 5. jqueryダイアログボックスのサイズを変更する際のコントロールのサイズ変更
- 6. Tricky raphael svg animation
- 7. SVG viewBoxズームイン(Raphael)
- 8. サイズ変更SVG画像は
- 9. Raphael svgの画像をマージする
- 10. Raphael JavascriptライブラリのSVGポリゴンをレンダリングする
- 11. Raphael JSのワードラップJS/SVG
- 12. SVG D3イメージのサイズ変更の問題
- 13. SVGサイズを変更しますか?
- 14. コンテナのサイズに合わせるためにSVGをサイズ変更
- 15. キャンバスを拡大してAndroidでSVGのサイズを変更する
- 16. SVGチョークラインのトラブル
- 17. svgで自動サイズ変更のテキストボックスを処理する
- 18. クロムブラウザの背景としてsvgイメージのサイズを変更する
- 19. バックグラウンドSVGのURLを実際の座標に変更する
- 20. apkに変換する際のトラブル
- 21. Jqueryを使用してSvgイメージのサイズを変更する
- 22. Raphael 2.1のsvgパスのスケーリング2.1
- 23. svgのサイズを正しく変更する方法は?
- 24. SVGイメージの内部サイズを変更する
- 25. JavaFX - SVGパスをTableView内で右にサイズ変更する方法
- 26. Raphael/svgでシェイプの一部を操作する方法は?
- 27. Raphaelキャンバスに変換されたsvg objを追加します。
- 28. JS/Jquery:実際にサイズを変更せずにウィンドウのサイズ変更を開始
- 29. htmlのimgタグで使用されるsvgのサイズを変更するには?
- 30. スケールプロパティを使用してsvg要素をサイズ変更する
もありますのhttp: //d-maps.com。ウィキペディアの地図とd-maps.comの世界地図に基づいて比較してみると面白いでしょう。 –