CODEWITHSUNDEEP
javascriptcsssvgzoomingpan
truly-daunting
truly-daunting

Reputation: 75

Background image not zooming and panning with SVG

I have an SVG and a background image. I'm trying to zoom in and out of the SVG, as well as pan. I can get the zoom and the panning to work, but my background image won't follow suit. Similarly, I can pan left and right, and the background image will follow, but not when I pan up and down.

I can't use any libraries for this e.g. svg-pan-zoom. The real application for this will be with a touch screen, and the onclickevents will be turned into touchstart events, which are linked to a different SVG. However, for my question, I've kept it simple with buttons.

I'd also prefer to have my background image added with CSS and not inline with the SVG, as this will increase the SVG file size.

I also need the div to stay the same size, to allow for the panning.

Surely there is a way to scale both the SVG and the background image in the same way?

Here is my JSFiddle. (The script doesn't seem to be working in JSfiddle, but will when run on a server).

Upvotes: 0

Views: 620

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101860

I'd also prefer to have my background image added with CSS and not inline with the SVG, as this will increase the SVG file size.

This is not accurate. If you link the background image via an <image> in your SVG, it won't increase the size of your SVG any more than using CSS will.

And it will move and scale, with the rest of your SVG, without needing to do any extra work.

Upvotes: 1

Related Questions