Применить панорамирование и масштабирование inline SVG

Question

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

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

Answer 1

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

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

Итак:

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

• Для панорамирования вы можете просто перевести (перемещения) ваш SVG элементов в противоположного направления которой вы панорамирование в стороне.

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

---

С другой стороны, некоторые погуглить (то есть 1-ый результат, который выскакивает), получается this neat library, который выглядит довольно просто для ваших целей.