views:

37

answers:

1

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.

A: 

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

Erik Dahlström
Thanks, but the spec says it's read-only. Could you please elaborate on how I can use it?
Spadar Shut
Yes, the `currentTranslate` object itself is readonly, but you can write to `currentTranslate.x` and `currentTranslate.y`.
Erik Dahlström