All geek questions in one place

Increase SVG with currentScale

I have a webpage that has an SVG <svg id='graph'>...</svg> window.

I would like to give the user the opportunity to zoom in on the SVG window.

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

The problem is that all windows change, even HTML elements outside the field.

Do you know the origin of this problem?

+4
source share
2 answers

To apply scaling only to svg use this ...

 <svg> <g transform="scale(2)"> </g> </svg>
+6
source

This may not be up to date without knowing which browser you are using, but you cannot implement currentScale if you use anything other than Internet Explorer or Microsoft Edge. You can verify this yourself by trying this JSBin in different browsers and see where it scales.

In this digression, a Google search in SVG currentScale found these error streams from Google and Mozilla to discuss similar issues. Mozilla thread discusses that it was a choice made specifically for consistency. SVG currentScale applies only to container elements, not to internal elements. This may interfere with functions such as zoomAndPan used for internal SVG elements. In addition, more advanced cross-browser solutions already exist, for example, scale () via the transform property.

+1
source

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

More articles:


All Articles