Twitter bootstrap SVG图标：viewBox未正确缩放大小

我正在使用material.io中SVG图标的引导： 问题是，当我将代码复制到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>

---

我知道宽度和高度是由视口和视口框设置的，用于将图片的大小设置在0和视口限制之间，但可能我忽略了一些细节。

看起来像是图形的坐标跨度为20 x 20，所以这就是您设置视口框的目的。那么宽度和高度是您想要的，即在本例中为48 x 48

---

确定，因此大小在SVG中确定，并且不能由viewBox修改。增加图形的唯一方法是在宽度和高度中设置更高的尺寸。但另一个问题是：为什么使用width=“48”height=“48”viewBox=“0 24 24”时，图片的大小仍然不是48x48而是40x40像素？宽度和高度是48。如果有空间的话，那就是没有画出来的地方。如果是这样，我们可以将viewBox设置为20 x 20。这实际上是溢出的。22 x 22似乎还可以。