Изменить внешний размер SVG, но сохранить размер всего внутри этого SVG

Question

Можно ли изменить самый внешний svg размер, но сохранить размер всего, что внутри svg?

Мне не удалось найти решение для этого в Интернете.

Во избежание x-y problem я опишу свой вариант использования для этого.

У меня есть div. div имеет overflow-y: scrollable. Итак, это означает, что когда мой самый внешний svg (который является прямым потомком div) станет больше, чем div, я смогу прокрутить, чтобы увидеть весь svg.

Сначала атрибуты ширины и высоты svg устанавливаются на 100%.

Когда необходимо масштабировать svg по вертикали (т.е. я увеличиваю область просмотра), а когда svg не помещается в div, я получаю красивую полосу прокрутки.

Проблема в том, что все в svg относится к svg, и когда svg масштабируется, контент также масштабируется, и я хотел бы избежать масштабирования контента.

Я думал об использовании viewBox и изменил его, когда svg масштабируется, но у меня изначально не было viewBox, поэтому я не могу этого сделать.

Попытка использовать viewBox для решения проблемы не удалась, поскольку атрибут viewBox влияет на другие svg s. Вот мой svg без применения viewBox атрибута:

Вот мой svg с примененным атрибутом viewBox:

Вот верхний svg, он никак не связан с нижним svg, но все же на него влияет после изменения атрибута viewBox в нижнем svg:

Answer 1

Проблема в том, что все внутри svg относится к svg, и когда svg масштабируется, контент также масштабируется, и я хотел бы избежать масштабирования контента.

Чтобы остановить это, вам нужно убедиться, что форматное соотношение viewBox остается таким же, как форматное соотношение SVG.

Например, если вы масштабируете SVG до width="200", height="600" (т.е. соотношение сторон 1: 3), то вам нужно убедиться, что ваш viewBox имеет такое же соотношение сторон. Например. viewBox="0 0 200 600" или viewBox="0 0 100 300" и т. Д.

Если это не сработает, вам нужно предоставить работающий пример страницы, чтобы мы могли видеть, что вы на самом деле делаете.