在窗口调整大小时自动缩放嵌入在HTML中的SVG

Question

我想在HTML页面中嵌入一些SVG，以便在调整页面大小时自动调整大小（使用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"，并在<div>容器中将尺寸设置为100％，但还没有让它工作。

有什么建议吗？

Answer 1

你的SVG根元素需要一个viewBox - 属性，它将定义SVG图像的整体大小：

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

现在您可以通过CSS设置图像的宽度或高度，它将完美缩放。