ラファエルを使用して、このヨーロッパの svgを描画しようとしています。svg の各パスについて、私はそれを解析して実行しました: r.path([countrypath]). これは機能しますが、問題はそれが巨大であることです。たとえば、一部のパスM 11689.234, 6005.2561...は 500x500 のキャンバスに収まりそうにありません。これのサイズを変更するにはどうすればよいですか? Raphael のスケール/変換が機能していないようです。または、使用方法がわかりません。SVG に各パスがあることに気付きましたがtransform="translate(5.875e-4,7.538462e-5)"、どうにかして viewBox を変更する必要がありますか? または、ラファエルに触れる前に、svg パスを何らかの方法で変更しますか?
8162 次
5 に答える
4
スケール（Xtimes、Ytimes、centreX、centerY）を使用できます
ここで、Xtimes,Ytimes は、0.2 を選択した場合の比率の縮小です。画像は 1/5 に縮小されます。
と
centerX、centerY は、svg のすべてのパス/パーツが均一かつ相対的に縮小されるように 0,0 を選択する相対座標です。
scale(0.2,0.2,0,0) を選択すると、画像は適切に 1/5 に縮小されます
于 2011-03-10T07:17:57.377 に答える
3
私は昨日、世界のかなり大きな SVG を実際に選び出し、それを SVGTOHTML コンバーターに送りました。ツールと関連情報は、@ http://www.irunmywebsite.com/raphael/svgsource.phpで見つけることができます 。
私は Raphael @ http://www.irunmywebsite.com/raphael/raphaelsource.phpのために大量のリソースをセットアップしました 。 これらの中には、Zeven によって提供されたスケール プルトンに包まれた世界地図があります。
20 分間の演習でこれが実現しました... http://www.irunmywebsite.com/raphael/colourmap2.php
うまくいけば、これはあなたや将来同様の問題を抱えている人に役立ちます. また、SVGTOHTML コンバーターに配置する前に、SVG エディターでパスを単純化したり、スケーリングしたりできることにも注意してください。多くの場合、マップは非常に詳細に描画できますが、単純化するとパスの長さが大幅に短縮されます。
于 2011-02-01T04:14:17.583 に答える
3
私が行ったことを使用するか、.transform("変換文字列") を使用してパスをスケーリングするか、2 つのオプションがあります。変換文字列は、sww、hh、xx、yy にすることができます。道。
.transform("s0.25,0.25,0,0");
例はこちらまたはjsfiddleはこちらにあります。 または使用
paper.scaleAll(n);
ここで、n は用紙全体を拡大縮小する量です。最初にページにパスを作成してから、紙のオブジェクトをおそらく半分に拡大します
paper.scaleAll(0.5);
以下のリンクで、Scale.Raphaeljs ライブラリのライブラリとサンプルを見つけることができます: Scale Raphael ライブラリ
于 2012-11-20T17:56:40.617 に答える
2
このような少量の変換は少し無駄に思えます。とにかく ~0 です。そのように見える変換属性を取り除いた場合、大きな違いが見られるとは思えません。
はい、viewBox を変更すると、SVG をサポートするすべてのビューアーで必要なものに適合させることができますが、raphael 自体は viewBox をサポートしていません (VML フォールバックを自分で提供する必要があります)。
特定の用途に合わせてパス データを前処理するか (ファイルサイズを抑えることは常に有効で、ウィキペディアのマップは通常非常に大きい)、または raphael の scale 関数を使用してパスを適切なサイズにスケーリングします。
更新: Raphaël v2.0 以降では、( setViewBox メソッドを使用して) viewBox をサポートしています。
于 2011-01-31T19:07:05.403 に答える
1
x、y デルタを取るRaphael 属性「translation」を使用できます。すなわち:
r.path([countryPath]).attr({translation:'-11689, -6005'});
複数のパスで再利用しやすくするために、svg パスの M から x と y の値を解析できます。これを行ったとき、キャンバス上にもパスが送信されたため、パスを正確に 0,0 にしたくないことがわかりました。要素の高さと幅に応じて調整が必要になる場合があります。
于 2011-05-01T01:13:26.070 に答える