How to scale SVG so as to preserve the radius of circles?

Question

css

There is such a graph made with SVG -

Its width is 100%, i.e. at the time the SVG was created, it is not known. The chart is correctly "stretched" using the preserveAspectRatio="none" parameter. However, this same setting flattens the circles.
Is there some way to keep width=100% but so that the radii of the circles inside the SVG don't break when the SVG is resized?

Answer 1

Still, the version of Moskus with a "terribly short line" - or rather, with a line of zero length - turns out to be the least perverted of all possible types of perversions. Circle is replaced with:
and it stretches like rubber.

Answer 2

You can't do that with pure SVG. There are two ways to solve the problem here:

1. The first is to remove preserveAspectRatio and do everything in scripts, that is, all SVG coordinates will be calculated along the way. This method will be a good choice if your data is constantly changing and you need to redraw everything, change the chart type on the fly, etc.
   
2. The second way is to put another layer on top of the SVG and place dots, text and everything else on it. This option can be sketched out in a quick way ( example ) and it is good in the case when the data does not change much (or does not change at all - it only arrives from the server once) and you need a simple solution without special js-logic.