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