Search code examples
svg.js

svgjs, how to move the view area after drawing elements?

I have

var draw = SVG().addTo('#draw');

as my main drawing place that is populated with all the svg elements at their respective places which are beyond the screen size.

Now I want to have drag functionality like we have in say google maps (where rendered elements stay in their positions but the view of the user moves to different part as we drag it around). I can handle the mouse events etc, but what exactly do I transform/move to achieve this type of drag?

I can track mouse movements and loop through all the elements present and move them. But I'm assuming there is a clever way of doing this. Ideally I want the elements to stay where they are, but the "draw" variable to somehow show different sections of itself on the screen as I drag.

What do I do?

Solution

  • This effect is achieved by changing the viewbox attribute of the outer svg element. There is a plugin available for svg.js which does exactly that. You can find it here. You can ofc also simply install it by running npm:

    npm install @svgdotjs/svg.panzoom.js