縮放和移動SVG圖像

Question

我需要一個小的腳本，將具有2層的功能的幀中顯示的SVG（矢量圖像）;

1. 圖像可以被平移（移動到處尋找在 用光標SVG圖像不同部分）simmilar Google地圖。

2. SVG圖像可以放大或縮小，也可以類似於Google地圖 地圖，但不需要加載新圖像，因爲圖像 是矢量。

對於simmilar劇本我已經看到，可以用於正常的圖像格式見http://jibbering.com/routeplanner/

Answer 1

如果有人仍然有興趣：我剛剛發現這個實現平移和縮放爲拉斐爾。仍然是一個非常年輕的項目，但有趣的是我認爲：

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

Answer 2

首先，你需要學習如何安裝擴展拉斐爾支持縮放功能... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas

接下來你想實現Wout的縮放插件... http://github.com/wout/raphael-zoom

Answer 3

你可以試試IE9的腳本測試頁http://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml需要稍微調整一下id，但對我來說工作得很好。

Answer 4

拉斐爾很好，但還不夠好。

看看這個頁面：http://code.google.com/p/svgpan/。它完全符合你的要求。

Answer 5

我得出安德烈的SVGPan成（希望）更友好Raphäel plugin :)

Answer 6

我最終使用從SVGPan衍生svg-pan-zoom，但允許的zoomin /平移你的HTML中的任意svg元素，並且可以添加控件。

如果你的完整頁面只是一個加載的SVG（比如老虎的例子），但是如果你的svg在html的某個地方更深的話，SVGPan會很好用。