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

Question

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

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

h1is36px和line-heigtis的字体大小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>

标签： csssvg

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>