SVG符号引用中Viewbox配置与CSS单维度尺寸适配问题

我在项目中使用SVG的<symbol>元素定义可复用图形，并通过<use>元素引用它们。为了灵活控制图标大小，我希望只通过CSS设置height或width其中一个属性，让另一个维度自动按比例缩放。我已经给<symbol>设置了viewBox属性，但实际引用后图形并没有正确按比例缩放，而是出现拉伸或者尺寸不符合预期的情况。

相关代码片段如下：

<!DOCTYPE html>
<html>
<head>
  <title>SVG Symbols Scaling Issue</title>
  <style>
    .icon {
      /* 仅设置宽度，期望高度自动按比例缩放，但未生效 */
      width: 48px;
      /* height: 48px; 不想手动设置这个 */
      fill: #2c3e50;
    }
  </style>
</head>
<body>
  <svg style="display: none;">
    <symbol id="icon-heart" viewBox="0 0 24 24">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    </symbol>
  </svg>

  <svg class="icon">
    <use href="#icon-heart"></use>
  </svg>
</body>
</html>

这个问题的核心是：<use>元素不会把<symbol>的viewBox继承到它所在的<svg>容器上——你的<svg class="icon">没有自己的比例参考，浏览器不知道该如何计算自动缩放的尺寸。

这里有两种可靠的解决方法：

方法1：给引用用的<svg>容器添加viewBox属性 #

直接把<symbol>的viewBox值复制到引用它的<svg>上，让浏览器明确知道图形的原始比例：

<svg class="icon" viewBox="0 0 24 24">
  <use href="#icon-heart"></use>
</svg>

然后CSS里只设置一个尺寸，另一个设为auto（浏览器默认就是auto，显式写出更清晰）：

.icon {
  width: 48px;
  height: auto;
  fill: #2c3e50;
}

这样不管你设置width还是height，另一个维度都会严格按照viewBox的比例自动计算。

方法2：用CSS的aspect-ratio指定比例（现代浏览器推荐） #

如果你不想重复写viewBox，可以利用CSS的aspect-ratio属性，直接对应<symbol>的宽高比（即viewBox的后两个数值的比例）：

.icon {
  width: 48px;
  height: auto;
  /* 对应viewBox 0 0 24 24的1:1比例 */
  aspect-ratio: 1 / 1;
  fill: #2c3e50;
}

这种方法更灵活，当你有多个不同比例的图标时，只需给不同类设置对应的aspect-ratio即可。

补充：为什么之前的设置不生效？ #

<symbol>的viewBox只作用于它内部的图形绘制，不会影响外部引用它的<svg>容器的尺寸逻辑。如果引用容器没有viewBox或比例参考，浏览器会默认使用300x150的默认尺寸——当你只设置width:48px时，height会保留默认的150px，这就导致图标被强制拉伸变形了。

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