Масштабирование и панорамирование изображений svg с использованием raphael.js или другой библиотеки js

Мне нужен небольшой script, который отобразит SVG (векторное изображение) в кадре, который имеет 2 функции;

Изображение может быть развернуто (перемещено, чтобы посмотреть на разные части изображение svg с курсором), похожее на карты Google.
Изображение SVG можно увеличить и уменьшить, также как и Google карты, за исключением того, что нет необходимости загружать новые изображения в качестве изображения является вектором.

Для simmilar script я видел, что работает с нормальными форматами изображений, см. http://jibbering.com/routeplanner/

Ответ 1

Если кому-то все еще интересно: я только что нашел эту реализацию Pan и Zoom для Raphael. Еще очень молодой проект, но достаточно интересный, я думаю:

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

Ответ 2

Рафаэль хорош, но недостаточно хорош.

Посмотрите эту страницу: http://code.google.com/p/svgpan/. Он делает именно то, что вы просили.

Ответ 3

Я вывел Андреа SVGPan в (надеюсь) более дружественный плагин Raphäel:)

Ответ 4

Сначала вам нужно узнать, как установить функцию, которая расширяет Рафаэль для поддержки масштабирования... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas

Далее вы хотите внедрить плагин масштабирования Wout... http://github.com/wout/raphael-zoom

Ответ 5

Вы можете попробовать сценарии с тестовой страницы IE9 http://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml Требуется небольшая настройка с помощью ids, но отлично работает для меня.

Ответ 6

В итоге я использовал svg-pan-zoom, который получен из SVGPan, но позволяет масштабировать/панорамировать произвольный элемент svg в вашем HTML и может добавлять элементы управления.

SVGPan отлично работает, если ваша полная страница - это только загруженный SVG (например, пример тигра), но не если ваш svg где-то глубже в html.