Задать вопрос
@miniven

Как сделать SVG элемент адаптивным?

Ситуация такая: есть SVG элемент, содержащий несколько дочерних элементов. Все они расположены в соответствии с конкретными координатами. Как сделать так, чтобы при уменьшении контейнера, дочерние элементы SVG элемента перемещались на новые координаты, как если бы они были указаны в процентах. Может нужно как-то систему координат уменьшать? Возможно ли вообще такое сделать? Спасибо

<svg id="world-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="world__svg" xmlns:svgjs="http://svgjs.com/svgjs">
  <rect id="SvgjsRect1007" width="22" height="22" shape-rendering="crispEdges" fill-opacity="0" fill="#ffffff" x="615" y="130" stroke="red" stroke-width="1" style="cursor: pointer;"></rect>
  <rect id="SvgjsRect1008" width="18" height="18" shape-rendering="crispEdges" fill-opacity="0" fill="#ffffff" x="524" y="211" stroke="red" stroke-width="1" style="cursor: pointer;"></rect>
  <rect id="SvgjsRect1009" width="18" height="18" shape-rendering="crispEdges" fill-opacity="0" fill="#ffffff" x="551" y="170" stroke="red" stroke-width="1" style="cursor: pointer;"></rect>
  <rect id="SvgjsRect1010" width="18" height="18" shape-rendering="crispEdges" fill-opacity="0" fill="#ffffff" x="571" y="182" stroke="red" stroke-width="1" style="cursor: pointer;"></rect>
</svg>
  • Вопрос задан
  • 321 просмотр
Подписаться 1 Средний 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Stepik
    JavaScript с нуля - основы языка и практика для начинающих
    2 недели
    Далее
  • Merion Academy
    Фронтенд-разработчик с нуля
    4 месяца
    Далее
  • Skypro
    JavaScript-разработчик с нуля
    9 месяцев
    Далее
  • Нетология
    Fullstack-разработчик на Python + нейросети
    20 месяцев
    Далее
  • Skillbox
    JavaScript
    3 месяца
    Далее
Решения вопроса 1
@miniven Автор вопроса
Решил, просто указав нужный размер ViewBox
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
JaredWinter
@JaredWinter
Помог? - Отметь решением.
Предоставьте саму SVG.
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы