Я работаю над компоновкой плана этажа svg, чтобы пользователи могли иметь возможность увеличивать и уменьшать масштаб.
Когда я впервые кодировал его, функция масштабирования работала, но svg не реагировал наРазмер контейнера.Я добавил свойство viewbox, чтобы сделать его отзывчивым, но это мешает функции масштабирования - оно увеличивается даже при попытке уменьшить масштаб, и масштабирование работает не так, как до добавления viewbox.
Вот 2 кодепа, демонстрирующих проблему:
Codepen 1
без окна просмотра - SVG корректно увеличивает, но не реагирует на размер контейнера
https://codepen.io/nicole-dsouza/pen/WJVywK
единственная разница в открывающем теге svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%">
Codepen 2
с окном просмотра - svg отзывчив, но неНе правильно масштабировать
https://codepen.io/nicole-dsouza/pen/QrexyV
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="0 0 873 699">
Может кто-нибудь помочь мне выяснить, что является причиной проблемы?Мне нужно, чтобы svg был отзывчивым и масштабируемым одновременно.
Ценю любую помощь.