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

Question

我想在 HTML 页面中嵌入一些 SVG，以便在调整页面大小时自动调整大小(使用 SVG、CSS 或 JS)，同时仍保留原始纵横比。

例如，使用 W3School 的示例:

<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 设置图像的宽度或高度，它会完美缩放。