在窗口调整大小时自动缩放嵌入在 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-attribute，它将定义 SVG 图像的整体大小：

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

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