如何正确缩放SVG？求解决方案及原理解析

原始SVG代码 #

这是需要缩放的加载动画SVG：

<svg><rect width="6" height="14" x="1" y="4" fill="currentColor"><animate id="svgSpinnersBarsFade0" fill="freeze" attributeName="opacity" begin="0;svgSpinnersBarsFade1.end-0.25s" dur="0.75s" values="1;.2"></animate></rect><rect width="6" height="14" x="9" y="4" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="svgSpinnersBarsFade0.begin+0.15s" dur="0.75s" values="1;.2"></animate></rect><rect width="6" height="14" x="17" y="4" fill="currentColor" opacity=".3"><animate id="svgSpinnersBarsFade1" fill="freeze" attributeName="opacity" begin="svgSpinnersBarsFade0.begin+0.3s" dur="0.75s" values="1;.2"></animate></rect></svg>

尝试过的无效操作 #

尝试通过设置SVG的width/height、font-size、添加viewBox，以及用容器设置width:100%;height:100%等方式缩放，均无效果，示例代码如下：

CSS：

svg { width: 100%; height: 100% }

HTML：

<div style="width: 64px; height: 64px; background-color: #f8f8f8;">
  <svg height="64" width="64" viewBox="0 0 64 64" style="font-size: 64px;"><rect width="6" height="14" x="1" y="4" fill="currentColor"><animate id="svgSpinnersBarsFade0" fill="freeze" attributeName="opacity" begin="0;svgSpinnersBarsFade1.end-0.25s" dur="0.75s" values="1;.2"></animate></rect><rect width="6" height="14" x="9" y="4" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="svgSpinnersBarsFade0.begin+0.15s" dur="0.75s" values="1;.2"></animate></rect><rect width="6" height="14" x="17" y="4" fill="currentColor" opacity=".3"><animate id="svgSpinnersBarsFade1" fill="freeze" attributeName="opacity" begin="svgSpinnersBarsFade0.begin+0.3s" dur="0.75s" values="1;.2"></animate></rect></svg>
</div>

解决方案 #

核心是设置匹配图形实际边界的viewBox，再通过容器或SVG自身的宽高属性控制缩放：

正确代码示例 #

<div style="width: 64px; height: 64px; background-color: #f8f8f8;">
  <!-- viewBox设置为图形实际的边界范围：0 0 23 18 -->
  <svg viewBox="0 0 23 18" style="width: 100%; height: 100%;">
    <rect width="6" height="14" x="1" y="4" fill="currentColor">
      <animate id="svgSpinnersBarsFade0" fill="freeze" attributeName="opacity" begin="0;svgSpinnersBarsFade1.end-0.25s" dur="0.75s" values="1;.2"></animate>
    </rect>
    <rect width="6" height="14" x="9" y="4" fill="currentColor" opacity=".4">
      <animate fill="freeze" attributeName="opacity" begin="svgSpinnersBarsFade0.begin+0.15s" dur="0.75s" values="1;.2"></animate>
    </rect>
    <rect width="6" height="14" x="17" y="4" fill="currentColor" opacity=".3">
      <animate id="svgSpinnersBarsFade1" fill="freeze" attributeName="opacity" begin="svgSpinnersBarsFade0.begin+0.3s" dur="0.75s" values="1;.2"></animate>
    </rect>
  </svg>
</div>

背后原理 #

• viewBox是SVG的核心缩放控制属性，它定义了SVG内部坐标系的可见范围，格式为min-x min-y width height，分别对应坐标系的起始X、起始Y，以及可见区域的宽高。
• 当SVG的width/height（或容器宽高）与viewBox的宽高比例不一致时，SVG会自动按比例缩放内部图形，填满指定的尺寸。

之前尝试无效的原因 #

你设置的viewBox="0 0 64 64"远大于图形的实际边界：

• 图形中最右侧的元素是x=17、width=6的矩形，所以实际宽度是17+6=23；
• 最底部的元素是y=4、height=14的矩形，实际高度是4+14=18。
• 这导致原始图形在64x64的viewBox中只占左上角极小的一块区域，即使设置SVG宽高为64px，图形还是保持原始大小，视觉上没有缩放效果。

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