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

我希望在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%，并按比例缩放高度

我尝试了一些方法，包括

保存aspectratio=“xMinYMin meet”

和在

容器中将维度设置为100%，但还没有成功

---

有什么建议吗？

您需要在SVG根元素上添加一个

viewBox

-属性，该属性将定义SVG图像的总体大小：

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

---

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

这就成功了。您知道如何处理viewBox的最后两个参数吗？增加它们似乎会减小图像的大小。这些数字是图像使用的宽度和高度。在您的示例中，从上面看，它是圆+半径：cx+r=宽度（140）和cy+r=高度（90）。您最好的选择是通过像Inkscape这样的图形软件保存图像，该软件将计算整体大小并将viewBox属性写入文件。如果使用Inkscape，请确保选择“Optimized Inkscape SVG”，这将产生更小的文件大小和可理解的XML源代码。这个答案救了我一天！