如何使用viewBox缩小SVG并将其正确缩放回40px×40px？

嘿，我帮你捋清楚怎么用viewBox把SVG精准缩到40px×40px！你改了属性没成功，大概率是viewBox和width/height的配合没搞对，或者没抓住viewBox的核心逻辑。

首先得明白：viewBox是用来定义SVG内部「画布」坐标系的，格式是viewBox="min-x min-y width height"——前两个值是内部画布的左上角坐标，后两个是内部画布的宽高；而SVG的width和height是它在页面上显示的实际尺寸。下面分情况给你解决方案：

情况1：原SVG已经有正确的viewBox #

这是最简单的场景，直接把SVG的width和height改成40px就行，viewBox保持不动。比如：

<!-- 原SVG（内部画布100x100，显示尺寸100px） -->
<svg viewBox="0 0 100 100" width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#2ecc71" />
</svg>

<!-- 修改后，显示尺寸缩到40px×40px -->
<svg viewBox="0 0 100 100" width="40" height="40">
  <rect x="10" y="10" width="80" height="80" fill="#2ecc71" />
</svg>

这样SVG会自动按比例缩放到40px，内部图形不会变形。

情况2：原SVG没有viewBox，只有固定宽高 #

这种情况得先给SVG加上正确的viewBox，值要和原SVG的宽高一致（因为原宽高就是内部画布的尺寸），再修改width和height为40px。比如：

<!-- 原SVG（没有viewBox，显示尺寸200px×200px） -->
<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="#3498db" />
</svg>

<!-- 先加viewBox，再改宽高 -->
<svg viewBox="0 0 200 200" width="40" height="40">
  <circle cx="100" cy="100" r="80" fill="#3498db" />
</svg>

常见坑点&解决办法 #

• 图形变形/留白：如果viewBox的宽高比例和你设置的width/height比例不一样，默认会保持图形比例，出现留白（preserveAspectRatio="meet"）或者裁剪（preserveAspectRatio="slice"）。如果你必须让图形填满40px×40px（哪怕变形），就加preserveAspectRatio="none"：

  <svg viewBox="0 0 80 100" width="40" height="40" preserveAspectRatio="none">
    <rect x="0" y="0" width="80" height="100" fill="#f39c12" />
  </svg>
  

• viewBox值不对：如果你的SVG内容不是从(0,0)开始，或者内部画布比实际图形大，得先确定图形的真实边界。比如图形左上角在(20,20)，右下角在(180,180)，那viewBox应该是20 20 160 160（180-20=160），再设置width=40 height=40，这样图形才会精准缩放。

内容的提问来源于stack exchange，提问作者dagda1