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

Я хотел бы встроить некоторый 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>, но пока не получил его.

Любые предложения?

Ответы

Ответ 1

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

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

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