CODEWITHSUNDEEP
javascriptsvgzoomingpan
Spadar Shut
Spadar Shut

Reputation: 15807

Zoom to different parts of SVG depending on mouse position

So I've found a script which seems to do just that , but it zooms a <g> that wraps whole svg contents by applying a transformation matrix to it (though it doesn't zoom in Opera because of sniffing). Wrapping all lements in a <g> is not an option because I'm making an image viewer and different files may be loaded.

Setting transform="matrix(...)" on the root <svg> gives no effect. Setting currentScale on <svg> zooms the picture but does it from the top left corner, and not from the mouse position or from center of the image. And pan functionality also does not work since it seems impossible to drag the whole <svg> element.

Manipulating the viewBox attribute seems to be helpful but it's really tricky to figure out the necessary values for it.

So can you think of a way to do zoom and pan in such a context?

You can download the demo here. Requires Opera to be installed on your computer.

Upvotes: 3

Views: 2667

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60986

There's a currentTranslate property that can be modified in addition to currentScale.

Upvotes: 3

Related Questions