Автоматическое масштабирование SVG, встроенного в HTML при изменении размера окна

Question

Я хотел бы встроить некоторые SVG в HTML-страницу таким образом, чтобы при ее изменении размер автоматически изменялся (с использованием SVG, CSS или JS), сохраняя при этом исходное соотношение сторон.

Например, используя пример из W3Schools:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

Можно ли установить ширину SVG = 5% ширины окна и пропорционально масштабировать высоту?

Я попробовал пару вещей, включая preserveAspectRatio="xMinYMin meet" и установил размеры на 100% в контейнере <div>, но пока не заработал.

Есть предложения?

Answer 1

Вам нужен viewBox -атрибут в корневом SVG-элементе, который будет определять общий размер SVG-изображения:

<svg version="1.1" viewBox="0 0 300 185">

Теперь вы можете установить ширину ИЛИ высоту изображения с помощью CSS, и оно будет отлично масштабироваться.