0

So we have this major project and we aim to create a simple wayfinding system through the use of inline SVG that includes zooming and panning feature and is targeted to be deployed on touchscreen units. We wanted to create something similar like google maps or something like this: http://bl.ocks.org/mbostock/3892919

We really wanted to use this plugin but everything are predefined in the script and we really don't know how to do it on inline SVGs (or maybe someone help us explain how the whole code works and maybe teach how to make it work on inline SVGs because we're pure amateurs.). I've looked for a lot of plugins but they all seem to not fit the need.

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
zangetsu
  • 127
  • 8

1 Answers1

0

When in doubt, just scale/move everything.

Zooming essentially involves making the elements bigger/smaller according to your zoom level and panning involves making the elements move in relation to your viewport.

So:

  • On each zoom level, iterate over all your paths and scale them by the appropriate coefficient.

  • For panning you can just translate(move) your SVG elements to the opposite direction of which you are panning towards.

You can learn more about scaling/translating SVG elements by having a look at: SVG transformations

On the other hand some Googling(meaning the 1st result that pops), turns this neat library, which looks pretty straightforward for your purposes.

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167