Zoom in SVG with currentScale

Question

I've a web page in which there is a SVG box <svg id='graph'>...</svg>.

I would like to give to the user the possibility to zoom in the SVG box.

I use for this purpose document.getElementById("graph").currentScale*=2; if I want to double the size of the box, for example.

The problem is that all the window is resized, even the HTML elements outside the box.

Do you know the origin of this problem please ?

Answer 1

In order to apply zoom to only svg , use this...

<svg>
<g transform="scale(2)">

</g>
</svg>

Answer 2

This may be off the mark without knowing which browser you're using, but you may not be able to implement currentScale if you're using anything other than Internet Explorer or Microsoft Edge. You can test this for yourself by trying this JSBin in different browsers and see where it scales.

Diving into this deeper, a Google search of "SVG currentScale" found these bug threads from Google and Mozilla discussing similar issues. The Mozilla thread discusses it was a choice made specifically for consistency's sake. SVG's currentScale only applies to container elements and not to inner elements. This could interfere with functions like zoomAndPan used on inner SVG elements. Additionally, better cross-browser solutions are already in place such as scale() via the transform property.