SVG 图标：viewBox 无法正确缩放大小答案

【问题标题】：SVG icons : viewBox not scale size correctlySVG 图标：viewBox 无法正确缩放大小
【发布时间】：2020-04-01 09:20:03
【问题描述】：

我正在使用带有来自 material.io 的 SVG 图标的 Bootstrap：https://material.io/resources/icons/?style=baseline 问题是，当我将代码复制到我的 HTML 页面中时，SVG 图标不会放大。我用 viewBox="0 0 48 48" 设置了 width="48" 和 height="48" 但即使视口正确，图片的大小仍然是 24x24 像素...

如何将图片缩放到选定的视口 (48x48)？

我尝试了 width="48", height="48", viewBox="0 0 24 24" 并接近我想要的结果。

代码：

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" ><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

我知道 width 和 height 用于 viewport 和 viewBox 设置图片的 0 和 viewport 限制之间的大小，但可能我错过了一些细节。

【问题讨论】：

标签： twitter-bootstrap svg responsive-design material-ui

【解决方案1】：

看起来绘图的坐标跨度为 20 x 20，所以这就是您将 viewBox 设置为的值。那么宽度和高度就是你想要的，在这种情况下是 48 x 48。

&lt;svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 22 22" &gt;&lt;path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/&gt;&lt;path d="M0 0h24v24H0z" fill="none"/&gt;&lt;/svg&gt;

【讨论】：

好的，所以尺寸在SVG中确定，不能被viewBox修改。扩大绘图的唯一方法是在宽度和高度中设置更高的尺寸。但另一个问题：为什么 width="48" height="48" viewBox="0 0 24 24" 图片的大小仍然不是 48x48 而是 40x40 像素？
宽度和高度都是48。如果有任何空间，那么它只是没有绘制的地方。如果是这样，我们可以将 viewBox 设置为 20 x 20。这实际上溢出了。 22 x 22 看起来不错。