将SVG的高度设置为行高？答案

【问题标题】：Set height of SVG to line-height?将SVG的高度设置为行高？
【发布时间】：2019-03-12 08:42:19
【问题描述】：

我想在标题旁边添加我的 SVG 图像作为图标：

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

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

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

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

svg 图像如何自动获取字体高度并与之匹配？

这是一个sn-p：

.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>

【问题讨论】：

你可以使用" img { display: inline-block; vertical-align:middle; } "
@Md.AbuSayed 这不太行，文本和图像不匹配，请参阅i.stack.imgur.com/tP65w.png - 另外，我更喜欢不需要设置高度的解决方案svg 手动。
当你给大图像加上文本然后制作文本中间，当图像小尺寸然后中间图像相关文本时，此代码工作。
你也可以看到这个链接：jsfiddle.net/h6s9mwuo
@Md.AbuSayed 在您的相关 jsfiddle 中，文本略高于图像。

标签： css svg

【解决方案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>

【讨论】：

嗯，这太棒了！但这仅适用于宽度小于 1.8em 的图像，对吧？
@Adam 它可以处理任何图像，只需根据图像的比例调整填充值......使其更大或更小以适合您的 SVG 并控制文本的距离跨度>
哦，我的错。我以为您想将文本的最顶部像素与香蕉的最顶部像素对齐

【解决方案2】：

此 CSS 使用内联 SVG 工作。使用 SVG 作为背景图像也可以防止更改文本的颜色。下面将 SVG 与文本的高度和颜色相匹配。

.svg {
    fill: currentColor;
    line-height: 1;
    height: 1em;
    width: 1em; 
}



<svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 400 400"><path class="svg-path"  d="M140 18.2C52 29.4-3.6 ...."/></svg>

【讨论】：

【解决方案3】：

通过它，它会起作用。

h2{display:flex;align-item:center;}

【讨论】：

这不太行，文本和图像不匹配，请参阅 i.stack.imgur.com/tP65w.png - 另外，我更喜欢不需要设置的解决方案手动设置 svg 的高度。
我已经更新了我的答案，再次检查，它会为你工作@Adam
感谢您的帮助。但是，文本仍然略高于图像。 jsfiddle.net/cr0dz2m4

【解决方案4】：

以下匹配图像和文本彼此相邻，但我仍然需要为 svg 图像设置固定高度。

  
.icon{
  height: 36px;
  display:inline-block;
  vertical-align:middle;
}

h1{
  font-size:36px;
  line-height:1.1;
  display:inline-block;
  vertical-align:middle;
}

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

【讨论】：

您想居中还是保持相同高度？因为这段代码没有产生相同的高度
@TemaniAfif 我正在寻找高度相同且自动计算的解决方案。