css - 将SVG的高度设置为行高？

Question

我想将我的 SVG 图像作为图标包含在标题旁边:

<h1 ><img src="icon-sell.svg" class="icon"> Verkaufen</h1>

h1的字体大小是36px，line-heigt是1.1。

我使用检查器工具发现计算出的字体高度是42.3px。如果我将 svg 的高度设置为 42.px，则它们不匹配:

我还认为使用检查器工具有点脏，因为对于不同的缩放级别，高度会发生一点变化，我想使用 svg 来确保它适合每个屏幕。

关于 svg 图像如何自动获取字体高度并与其匹配的任何建议？

这是一个片段:

.icon{
  height: 43.75px;
}

h1{
  font-size:36px;
  line-height:1;
}

<h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg" class="icon">
Headline
</h1>

Answer 1

我会将 svg 视为背景图像，以确保它在不设置任何高度的情况下匹配高度:

h1 {
  line-height: 1;
  padding-left: 1.8em;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

<h1 style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg)">
  Headline
</h1>

<h1 style="font-size:50px;background-image:url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg)">
  Headline
</h1>
<h1 style="font-size:10px;background-image:url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg)">
  Headline
</h1>