@softshape

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

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

5add6b40205a7634424762.png

Его ширина 100%, т.е. на момент создания SVG она не известна. График корректно "тянется" при помощи параметра preserveAspectRatio="none". Однако этот же параметр сплющивает окружности.
Есть ли какой-то способ сохранить width=100% но так, чтобы радиусы окружностей внутри SVG не ломались при изменении размера SVG ?
  • Вопрос задан
  • 120 просмотров
Решения вопроса 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" />

и оно тянется как резина.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sfi0zy
@sfi0zy Куратор тега CSS
UI developer. Верстаю неверстаемое.
Используя чисто SVG так сделать не получится. Тут есть два пути решения проблемы:
  1. Первый - убрать preserveAspectRatio и сделать все на скриптах, то есть все координаты на SVG будут рассчитываться по ходу дела. Этот способ будет хорошим выбором, если у вас данные постоянно меняются и нужно все перерисовывать, на лету менять тип графика и.т.д.
  2. Второй путь - поверх SVG положить еще один слой и на нем расположить точки, текст и все, что там еще нужно. Этот вариант можно набросать по-быстрому (пример) и он хорош в случае, когда данные сильно не меняются (или вообще не меняются - только один раз с сервера прилетают) и нужно простое решение без особой js-логики.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы