Как настроить поле просмотра SVG, ширину и высоту, которое будет масштабируемым и отзывчивым ⇐ CSS

[Anonymous]

Я новичок в дизайне SVG.
Боюсь масштабировать, увеличивать/уменьшать масштаб с помощью контейнера и обеспечивать его чувствительность ко всем устройствам.

Можно ли вообще спроектировать SVG таким образом, чтобы он подходил для всех устройств и поддерживал функциональность увеличения/уменьшения просмотра при просмотре?

Я пытался поиграть с областью просмотра и окном просмотра для каждой точки останова.

например. для рабочего стола у меня есть SVG, который можно поместить в контейнер. должен масштабироваться и увеличиваться и уменьшаться вместе с контейнером (svgClass).

Код: Выделить всё

.svgClass {
background-image: url('assets/svg/desktop-svg.svg');
width: "100%";
height: 800px;
position: absolute;
}

Пример SVG

---desktop-svg.svg---

Код: Выделить всё

-----

Он хорошо подходит для 100% масштабирования браузера, но если в случае увеличения или уменьшения масштаба SVG смещается.

Чтобы справиться с увеличением, я увеличил высоту просмотра = «1400» и ширину = «800» по сравнению с окном просмотра (0 0 1121 641). который работал нормально, но масштабирование по-прежнему не работает.

Опробовал: удалил ширину и высоту из области просмотра, также попробовал установить авто и установить 100% ширину и высоту. Никакого успеха.

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

Как разработать SVG, который может масштабироваться вместе с контейнером и оставаться отзывчивым?>

Подробнее здесь: https://stackoverflow.com/questions/602 ... responsive