SVG 图标：viewBox 无法正确缩放大小
SVG icons : viewBox not scale size correctly
我正在使用 Bootstrap 和来自 material.io 的 SVG 图标：https://material.io/resources/icons/?style=baseline
问题是，当我在 HTML 页面中复制代码时，SVG 图标没有放大。
我设置了 width="48" 和 height="48" with viewBox="0 0 48 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 limits 之间，但也许我错过了一些细节。
看起来绘图的坐标跨度为 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>
我正在使用 Bootstrap 和来自 material.io 的 SVG 图标：https://material.io/resources/icons/?style=baseline 问题是，当我在 HTML 页面中复制代码时，SVG 图标没有放大。 我设置了 width="48" 和 height="48" with viewBox="0 0 48 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 limits 之间，但也许我错过了一些细节。
看起来绘图的坐标跨度为 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>