24

2つの機能を持つフレーム内にSVG（ベクター画像）を表示する小さなスクリプトが必要です。

  1. 画像は、グーグルマップと同じようにパンすることができます（カーソルでsvg画像のさまざまな部分を見るために移動します）。

  2. SVG画像は、画像がベクトルであるため、新しい画像を読み込む必要がないことを除いて、Googleマップと同様にズームインおよびズームアウトできます。

通常の画像形式で動作する類似のスクリプトについては、http ： //jibbering.com/routeplanner/を参照してください。

4

6 に答える 6

20

ラファエルは良いですが、十分ではありません。

このページをチェックしてください：http ：//code.google.com/p/svgpan/ 。それはまさにあなたが求めたことをします。

于 2010-09-28T20:13:08.243 に答える
16

誰かがまだ興味を持っているなら：私はちょうどラファエルのためのパンとズームのこの実装を見つけました。まだ非常に若いプロジェクトですが、十分に興味深いと思います。

https://github.com/escobar5/raphael-pan-zoom

ここでのオンラインデモ：http：//htmlpreview.github.com/？https： //raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index.html

于 2012-12-18T23:09:50.350 に答える
12

私はAndreaのSVGPanを（うまくいけば）よりフレンドリーなRaphäelプラグインに導きました:)

于 2010-11-02T19:23:34.843 に答える
4

まず、ズームをサポートするためにRaphaelを拡張する関数をインストールする方法を学ぶ必要があります... http：//www.irunmywebsite.com/raphael/additionalhelp.html？q = addownmethodstocanvas

次に、Woutのズームプラグインを実装します... http：//github.com/wout/raphael-zoom

于 2010-03-01T02:37:00.123 に答える
1

IE9テストページhttp://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtmlからスクリプトを試すことができます。IDを少し調整する必要がありますが、私にとっては問題なく機能しました。

于 2010-03-27T17:53:41.143 に答える
0

最終的にSVGPanから派生したsvg-pan-zoomを使用しましたがsvg、HTML内の任意の要素のズームイン/パンが可能で、コントロールを追加できます。

SVGPanは、ページ全体がロードされたSVG（tigerの例のように）である場合はうまく機能しますが、svgがhtmlのどこか深い場合は機能しません。

于 2014-08-08T14:31:58.537 に答える