将SVG的高度设置为line-height? [英] Set height of SVG to line-height?

问题描述

我想将我的SVG图片作为标题旁边的图标添加:

I want to include my SVG image as an icon next to the headline:

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

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

The font-size of h1 is 36px and the line-heigt is 1.1.

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

I used the inspector tool to find that the computed height of the font is 42.3px. If I set the height of the svg to 42.px, then they do not match:

我还认为使用检查器工具有点脏，因为对于不同的缩放级别，高度有所变化，并且我想使用svg来确保它正确地适合每个屏幕.

I also think its a bit dirty to use the inspector tool, because for different zooming level the height changed a little bit and I wanted to use svg to make sure it fits on every screen properly.

有人建议svg图像如何自动获取字体的高度并与之匹配吗?

Any advice how the svg image can automatically get the height of the font and also match up with it?

这是一个代码段:

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

推荐答案

我将svg视为背景图像，以确保它与高度匹配而不设置任何高度:

I would consider the svg as a background-image to be sure it will match the height without setting any height:

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>

这篇关于将SVG的高度设置为line-height?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！