Применение панорамирования и масштабирования встроенного SVG

Итак, у нас есть этот крупный проект, и мы стремимся создать простую систему навигации с помощью встроенного SVG, которая включает функции масштабирования и панорамирования и предназначена для развертывания на устройствах с сенсорным экраном. Мы хотели создать что-то похожее на карты Google или что-то вроде этого: http://bl.ocks.org/mbostock/3892919

Мы очень хотели использовать этот плагин, но все предопределено в скрипте, и мы действительно не знаем, как это сделать на встроенных SVG (или, может быть, кто-нибудь поможет нам объяснить, как работает весь код, и, возможно, научит, как заставить его работать на встроенных SVG, потому что мы чистые любители.). Я искал много плагинов, но все они, похоже, не соответствуют потребностям.


svg html maps zooming panning
person zangetsu    schedule 17.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если сомневаетесь, просто масштабируйте/перемещайте все.

Масштабирование, по сути, включает в себя увеличение/уменьшение элементов в соответствии с вашим уровнем масштабирования, а панорамирование включает в себя перемещение элементов относительно вашего окна просмотра.

So:

  • На каждом уровне масштабирования переберите все пути и масштабируйте их с помощью соответствующего коэффициента.

  • Для панорамирования вы можете просто перевести(переместить) свои элементы SVG в противоположное направление, в котором вы панорамируете.

Вы можете узнать больше о масштабировании/преобразовании элементов SVG, взглянув на: преобразования SVG

С другой стороны, некоторый поиск в Google (имеется в виду первый результат, который появляется), превращает в эту изящную библиотеку , что выглядит довольно просто для ваших целей.

person nicholaswmin    schedule 18.01.2015