Magnification to several parts of SVG depending on mouse position

So I found a script that seems to do just that, but it does scale <g>, which wraps all svg content by applying a transform matrix to it (although it does not increase Opera due to sniffing). Wrapping all layers in is <g>not an option, because I am doing an image viewer, and different files can be downloaded.

Setting transform="matrix(...)"in the root directory has <svg>no effect. Setting currentScaleto <svg>zooms in on the image, but does it from the upper left corner, and not from the position of the mouse or from the center of the image. The pan function also does not work, because it is impossible to drag the entire item <svg>.

Manipulating an attribute viewBoxseems useful, but it is very difficult to determine the values ​​it needs.

So, can you think of a way to scale and pan in such a context?

You can download the demo. Opera is required to be installed on your computer.

+3
source share
1 answer

There is a property here currentTranslatethat can be changed in addition to currentScale.

+3
source

Source: https://habr.com/ru/post/1758553/


All Articles