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

我想在页面大小调整时自动调整大小（使用SVG，CSS或JS）来将某些SVG嵌入HTML页面，同时仍保留原始的宽高比。在窗口调整大小时自动缩放HTML中嵌入的SVG

例如，使用从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％，但尚未完成它的工作。

有什么建议吗？

来源

2012-02-21 Keith Hughitt

你需要一个viewBox -attribute您的SVG根元素，这将定义SVG图像的整体大小：

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

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

来源

2012-02-21 17:15:15 feeela

这样做。你知道viewBox的最后两个参数是如何处理的吗？增加它们似乎*减少了图像的大小。 – 2012-02-21 20:11:00

这些数字是图像的使用宽度和高度。在你上面的例子中，它会圈出+半径：cx + r =宽度（140）和cy + r =高度（90）。你最好的选择是通过像Inkscape这样的图形软件来保存图像，它将计算整体尺寸并将viewBox属性写入文件。如果使用Inkscape，请确保选择“优化的Inkscape SVG”，这将产生更小的文件大小和可理解的XML源代码。 – feeela 2012-02-22 10:56:34

这个答案刚刚救了我的一天！ – qed 2014-05-20 19:50:21

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

回答

相关问题