如何在精灵中获取 SVG 图标的自动宽度？

Question

我在为 SVG 图标设置自动宽度、保留纵横比、为 Firefox、Chrome 和 IE11 设置固定高度时遇到问题。 我知道这是一个常见问题，并且我已经阅读了very good article 中报告的示例，但是我找不到可以正常工作的代码 sn-p 来使其工作。 这是我的代码：

<div class="icon-container">
  <svg class="icon">
    <use xlink:href="mySvgSpritePath/icons.svg#myIcon"></use>
  </svg>
</div>

<style type="text/css">
  .icon-container {
    background-color: pink;
    width: 230px;
    height: 75px;
  }
  .icon {
    background-color: lightgreen;
  }        
</style>

正如预期的那样，我得到以下信息，图标占据了其容器的 100% 宽度：

我的图标 (viewBox="0 0 26.81 45") 的 viewBox 在我的标记中不可见，因为它是在我的 SVG 精灵内部的 <symbol> 元素内定义的。 这样我就不能使用文章中描述的填充技巧，因为我无法访问生成最终 html 的模板中的 viewBox 值：如果可以的话，我将为我可以从我的精灵获得的每个不同图标设置一个动态填充.

当然，我想要的输出如下：

你有什么建议、意见甚至更好的sn-ps来实现这个目标吗？

谢谢

Answer 1

在添加属性preserveAspectRatio="xMinYMin meet"

使用em

scss 模板：

.icon-{{base}} {
    font-size: 1em;
    width: ({{width.inner}} / {{height.inner}})*1em;
    height: 1em;
}

输出：

.icon-medal {
    font-size: 1em;
    width: 1.32em;
    height: 1em;
}

用法：

.icon-medal {
    font-size: 75px;
}