Как масштабировать SVG так, чтобы сохранить радиус окружностей?

Question

[softshape]

Есть вот такой график, сделанный с помощью SVG -



Его ширина 100%, т.е. на момент создания SVG она не известна. График корректно "тянется" при помощи параметра preserveAspectRatio="none". Однако этот же параметр сплющивает окружности.
Есть ли какой-то способ сохранить width=100% но так, чтобы радиусы окружностей внутри SVG не ломались при изменении размера SVG ?

Comments

[Moskus]

Нарисовать точки ужасно короткой линией (а не окружностью) и настроить её толщину и закругление по концам, чтобы получить окружность. Но это - извращение.

[Lynn «Кофеман»]

У вас ещё и буквы наверняка плющатся

[softshape]

Moskus, этот вариант оказался лучшим среди остальных, однако он не сработал в IE/Edge. Эти два браузера плющат даже line :(

[Moskus]

softshape, ну я поздравляю Microsoft с тем, что они не изменяют своим традициям и кладут хер на принципы формата SVG, как и на все остальное. Если кто-то продолжает пользоваться IE с учетом этого - я их тоже поздравляю. Всем идиотам не угодить.

Answer 1

[softshape]

Все-таки вариант Moskus с "ужасно короткой линией" - а точнее, с линией нулевой длины - оказывается в итоге наименее извращенным из всех возможных типов извращений. Circle заменяется на:

<line x1="x" y1="y" x2="x" y2="y" style="stroke:#00a7e1;stroke-linecap:round;stroke-width:13px;vector-effect:non-scaling-stroke" />

и оно тянется как резина.

Answer 2

[Ivan Bogachev]

Используя чисто SVG так сделать не получится. Тут есть два пути решения проблемы:

1. Первый - убрать preserveAspectRatio и сделать все на скриптах, то есть все координаты на SVG будут рассчитываться по ходу дела. Этот способ будет хорошим выбором, если у вас данные постоянно меняются и нужно все перерисовывать, на лету менять тип графика и.т.д.
   
2. Второй путь - поверх SVG положить еще один слой и на нем расположить точки, текст и все, что там еще нужно. Этот вариант можно набросать по-быстрому (пример) и он хорош в случае, когда данные сильно не меняются (или вообще не меняются - только один раз с сервера прилетают) и нужно простое решение без особой js-логики.