将SVG的高度设置为行高？

Question

将SVG的高度设置为行高？

8

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

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

h1的font-size为36px，line-height为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>

- Adam

3

你可以使用 "img { display: inline-block; vertical-align: middle; }"。该代码可以使图片与周围的文本在同一行显示，并垂直居中对齐。 - Md. Abu Sayed

当您提供带有文本的大图像时，此代码可以工作，然后将文本置于中心位置；当图像尺寸较小时，则将与中心图像相关的文本居中显示。 - Md. Abu Sayed

您可以查看此链接：https://jsfiddle.net/h6s9mwuo/ - Md. Abu Sayed

你也可以在这里使用内联元素h1 span，h1 img包装文本， h1 img { display: inline-block; vertical-align: middle } 链接：https://jsfiddle.net/6xg5ho8s/ - Md. Abu Sayed

@Md.AbuSayed 是的，那个方法可行。我找到了另一个解决方案，不需要额外的 span：https://dev59.com/questions/QbLma4cB1Zd3GeqPbHVp#55118108 - Adam

显示剩余3条评论

4个回答

1

以下内容与图像和旁边的文本相匹配，但我仍需为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>

- Adam

1

你是想让内容居中还是让它们高度一致？因为这段代码没能产生相同的高度。 - Temani Afif

@TemaniAfif 我正在寻找一个解决方案，其中高度相同且自动计算。 - Adam

1

这个CSS使用内联SVG工作。使用SVG作为背景图像可以防止随着文本变化而改变颜色。下面的代码将SVG与文本的高度和颜色匹配。

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

<h1><svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 400 400"><path class="svg-path" d="M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-11zm-1 .724c-2.067.95-4.539 1.481-7 1.656v6.237a25.222 25.222 0 0 1 1.088.085c2.053.204 4.038.668 5.912 1.56V3.224zm-8 7.841V4.934c-.68.027-1.399.043-2.008.053A2.02 2.02 0 0 0 0 7v2c0 1.106.896 1.996 1.994 2.009a68.14 68.14 0 0 1 .496.008 64 64 0 0 1 1.51.048zm1.39 1.081c.285.021.569.047.85.078l.253 1.69a1 1 0 0 1-.983 1.187h-.548a1 1 0 0 1-.916-.599l-1.314-2.48a65.81 65.81 0 0 1 1.692.064c.327.017.65.037.966.06z"/></svg> Test</h1>

- Blueline

-1

仔细看一下，它会起作用的。

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

- Sarabjit Singh

这并不起作用，文本和图像不匹配，请参见i.stack.imgur.com/tP65w.png - 另外，我更喜欢一种无需手动设置SVG高度的解决方案。 - Adam

我已经更新了我的答案，请再次检查，它会对你有用的 @Adam - Sarabjit Singh

感谢您的帮助。但是，文本仍然略高于图片。https://jsfiddle.net/cr0dz2m4/ - Adam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

我会将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>