SVG zoom effect is easily achievable using d3js or svgjs libraries, there many code snippets out there how to do it properly. But what about doing this on a raw SVG file without running mentioned libraries? That’s what I was doing in setupmap, processing raw files to implement variety of features.
But, before we start, make sure you are familiar with viewBox and viewPort, and how changing size one of them, affect the other.
This is the original image - red dot in the center of black background:
The red dot is not in the center of ViewPort anymore, that’s because the ViewBox became “larger” or the relation of ViewPort to ViewBox coordinate system has been changed (scaled in 1.5 times).
In order to return red dot to the center of rectangle we need to shift it, according to different parameters, like viewport/viewbox size, radius of circle, original location of circle, etc. Shifting can be done using translate definition of transform attribute:
So, it was easy, in order to get the zoom effect, you scale and shift using some predefined location. But, how to get the shift values? Here is Python code snippet that is doing just this. The function arguments is self-explanatory and the output is two numbers that must be used in translate definition.
Let’s call this function on our sample image:
So, now we can use -50.0, -50.0 in translate definition: