在窗口调整大小时自动缩放嵌入在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

您需要viewBox在SVG根元素上使用-attribute,它将定义SVG图像的整体大小:

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

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

这些数字是图像的使用宽度和高度.在你的例子中,它将是圆+半径:cx + r =宽度(140)和cy + r =高度(90).您最好的选择是通过Inkscape等图形软件保存图像,这将计算整体大小并将viewBox属性写入文件.如果使用Inkscape,请确保选择"优化的Inkscape SVG",这将产生更小的文件大小和可理解的XML源代码. (4认同)