如何使实例化的SVG保持1em高度及viewBox定义的宽高比？

你遇到的问题核心是实例化的SVG没有继承symbol的viewBox，浏览器没法识别它的固有宽高比，所以设置width:auto时会默认撑满容器宽度。下面是两种靠谱的解决方式：

方法一：给实例化的SVG添加viewBox属性 #

直接把symbol里的viewBox="-10 0 828 1000"复制到使用的<svg>标签上，这样浏览器就能根据viewBox计算正确的比例，再配合height:1em; width:auto;就可以了：

<svg class="inline" viewBox="-10 0 828 1000">
    <use href="#image1"></use>
</svg>

对应的CSS：

.inline {
    fill: currentColor;
    display: inline-block;
    height: 1em;
    width: auto;
}

方法二：用CSS手动计算宽度 #

既然已知宽高比是828/1000，可以直接用calc()计算宽度，不需要依赖viewBox：

.inline {
    fill: currentColor;
    display: inline-block;
    height: 1em;
    width: calc(1em * 828 / 1000);
}

这种方式适合不想重复写viewBox的场景，计算结果和方法一完全一致。

另外补充一点：如果symbol里的viewBox偏移值（-10）不影响显示，也可以简化成viewBox="0 0 828 1000"，效果一致，只是图标位置会微调，但不影响比例计算。

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