如何让不同尺寸的复用SVG元素自动垂直水平居中？

当然有原生解决方案！你不需要手动调整每个<svg>容器的viewBox，只需要利用SVG的preserveAspectRatio属性和给<symbol>设置正确的viewBox，就能让复用的图标在任何尺寸的容器里自动居中。

核心原理 #

问题的关键在于：你之前的<symbol>没有定义自己的viewBox，导致外层<svg>无法正确识别图标的边界和坐标系。给<symbol>添加viewBox后，配合外层<svg>的preserveAspectRatio属性，就能自动完成缩放和居中定位。

修正后的完整代码示例 #

<!-- 定义带viewBox的可复用Symbol -->
<svg style="display:none">
  <symbol id="home" viewBox="0 0 14.8 13.2"> <!-- 根据图标内容的实际边界设置viewBox -->
    <path d="M12.3469758,5.06253201 L14.1823758,6.54832612 C14.2573758,6.61066436 14.3735758,6.64123789 14.4641758,6.64123789 C14.5781758,6.64123789 14.7043758,6.59299524 14.7833758,6.49928936 C14.9253758,6.33113495 14.9095758,6.08078936 14.7401758,5.94003201 L7.71597578,0.0913555356 C7.64157578,0.0294143591 7.55297578,0.000826123823 7.46277578,0.000230535587 C7.45637578,-0.000365052648 7.45037578,0.000429064999 7.44397578,3.20061754e-05 C7.43757578,0.000429064999 7.43137578,-0.000365052648 7.42497578,0.000230535587 C7.33477578,0.000826123823 7.24477578,0.0294143591 7.17037578,0.0913555356 L0.142975778,5.94003201 C-0.0262242219,6.08078936 -0.0484242219,6.33133348 0.0933757781,6.49928936 C0.172575778,6.59299524 0.285975778,6.64123789 0.400175778,6.64123789 C0.490975778,6.64123789 0.531975778,6.61086289 0.606975778,6.54832612 L1.94677578,5.39169377 L1.94677578,11.6271055 C1.94677578,12.4944805 2.85697578,13.2087894 3.74657578,13.2087894 L10.9465758,13.2087894 C11.7877758,13.2087894 12.3467758,12.5564217 12.3467758,11.6271055 L12.3469758,5.06253201 Z M10.9467758,12.4146717 L9.54697578,12.4146717 L4.94697578,12.4146717 L3.74677578,12.4146717 C3.30097578,12.4146717 2.74697578,12.0547379 2.74697578,11.6271055 L2.74697578,4.74766436 C2.74697578,4.74091436 2.79537578,4.73436289 2.79497578,4.72741436 L7.41997578,0.899370241 L11.6883758,4.48302465 C11.6245758,4.55330406 11.5471758,4.64542171 11.5471758,4.74766436 L11.5469758,11.6271055 C11.5469758,12.0513629 11.3849758,12.4146717 10.9467758,12.4146717 Z" id="Shape" fill-rule="nonzero"></path>
    <path d="M8.25,7.5 L6,7.5 L6,12.75 L5.25,12.75 L5.25,7.125 C5.25,6.91789322 5.41789322,6.75 5.625,6.75 L6,6.75 L8.625,6.75 C8.83210678,6.75 9,6.91789322 9,7.125 L9,7.5 L9,7.875 C9,8.08210678 8.83210678,8.25 8.625,8.25 C8.41789322,8.25 8.25,8.08210678 8.25,7.875 L8.25,7.5 Z M8.625,9 C8.83210678,9 9,9.16789322 9,9.375 L9,12.375 C9,12.5821068 8.83210678,12.75 8.625,12.75 C8.41789322,12.75 8.25,12.5821068 8.25,12.375 L8.25,9.375 C8.25,9.16789322 8.41789322,9 8.625,9 Z" id="Combined-Shape"></path>
  </symbol>
</svg>

<!-- 不同尺寸的容器，自动居中显示图标 -->
<svg width="200" height="200" preserveAspectRatio="xMidYMid meet" fill="#000">
  <use href="#home"></use>
</svg>

<svg width="300" height="150" preserveAspectRatio="xMidYMid meet" fill="#000">
  <use href="#home"></use>
</svg>

<svg width="100" height="300" preserveAspectRatio="xMidYMid slice" fill="#000">
  <use href="#home"></use>
</svg>

关键细节说明 #

1. 给<symbol>添加viewBox
   这个属性定义了图标内容的坐标范围（格式：min-x min-y width height），我这里是根据你提供的路径计算出的边界值。你也可以用SVG编辑工具（如Inkscape、Figma）导出时自动生成，或者手动计算路径的最大/最小坐标值。

2. 外层<svg>的preserveAspectRatio设置

   • xMidYMid：指定图标在容器的水平和垂直方向都居中对齐。
   • meet：保持图标宽高比，确保整个图标完整显示在容器内（容器尺寸与图标比例不一致时会出现留白）。
   • slice：保持宽高比，让图标填满容器，超出容器的部分会被裁剪。
   • 如果不需要保持比例（允许图标拉伸变形），可以使用preserveAspectRatio="none"，但一般不推荐图标类SVG使用。

3. 无需手动调整外层<svg>的viewBox
   因为<symbol>已经定义了自己的坐标系，<use>标签会继承这个设置，配合preserveAspectRatio就能自动适配任意容器尺寸并完成居中。

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