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.