SVG ViewBox нарушает функциональность Zoom

Question

Я работаю над компоновкой svg floorplan, которую пользователи должны иметь возможность увеличивать и уменьшать.

Когда я впервые его кодировал, функция масштабирования работала, но 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

с viewbox - 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 был отзывчивым и масштабируемым одновременно.

Ценю любую помощь.

Answer 1

Удалите атрибуты ширины и высоты и используйте вместо этого окно просмотра. И оберните svg в обертку отзывчивого объекта. См. https://codepen.io/vcurd/pen/bKEdQe

<div class="svg-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 890 150">