我正在将Bootstrap与来自material.io的SVG图标一起使用：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>
我知道宽度和高度是用于视口的，而viewBox会将图片的大小设置在0或视口限制之间，但是也许我错过了一些细节。
答案 0 :(得分：1)
看起来图形的坐标跨度为20 x 20，所以这就是将viewBox设置为的坐标。那么宽度和高度就是您想要的，在这种情况下就是48 x 48。
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 22 22" ><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>