如何让通过<use>引用的SVG按高度自动适配宽度？

问题根源 #

你遇到的问题是因为引用外部<symbol>的<svg>容器未设置viewBox属性，浏览器会使用默认的300x150内部坐标系，导致设置height:1em时，width:auto保留默认的300px宽度，最终容器尺寸异常。

解决方案 #

只需给HTML中的<svg>元素添加viewBox属性，值与外部symbol的viewBox一致即可：

修改后的HTML代码 #

<!DOCTYPE html>
<html><head>
  <style>
    .logo {color:#f0f; border:1px solid #0f0; height:1em; width:auto;}
  </style>
</head><body>
  <svg class="logo" viewBox="0 0 40 20">
    <use href="foo.svg#test" x="0" y="0" />
  </svg>
</body></html>

原理说明 #

• 添加viewBox="0 0 40 20"后，SVG容器会按照40:20的宽高比自动计算宽度。当设置height:1em时，宽度会自动变为2em（因为40/20=2）。
• 加上1px的边框后，总尺寸就会是2em + 2px（宽）和1em + 2px（高）。如果你的1em等于16px，正好得到34x18的目标尺寸（32+2=34，16+2=18）。

额外说明 #

• 现代浏览器中xlink:href可简化为href，若需兼容旧版浏览器，也可保留xlink:href。
• 这种方式比直接固定width更灵活，能适配不同的em值或其他相对单位。

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