高度 svg 按字体大小答案

【问题标题】：height svg by font size高度 svg 按字体大小
【发布时间】：2021-12-16 21:04:46
【问题描述】：

我在网站上有很多文本，有时我需要在文本中添加 SVG 图标：p、h1、span、ul 和其他基于文本的组件。我如何在没有 FLEX 的情况下通过此标签中的文本设置 SVG 高度？我尝试行高，高度：100%，不要帮助...

<h1>Hello <svg class="heightByFontSize"></svg> world!</h1>
<p>Hello <svg class="heightByFontSize"></svg> world!</p>
<span>Hello <svg class="heightByFontSize"></svg> world!</span>

.heightByFontSize{
    // ????
}

【问题讨论】：

height: 1em，或类似的...？
1:em 在 svg 上不起作用i.ibb.co/bXsbSTJ/size.png
不要自己发布这样的截图，这些截图给我们的实际有用信息很少。 minimal reproducible example 是在这里提出此类问题的正确方法。也许它只需要更多而不是 1em。

标签： html css svg

【解决方案1】：

.heightByFontSize {
  height: 0.7em;
  width: auto;
}

<h1>Hello <svg viewBox="0 0 30 30" class="heightByFontSize"><rect x="0" y="0" height="30" width="30" /></svg> world!</h1>
<p>Hello <svg viewBox="0 0 30 30" class="heightByFontSize"><rect x="0" y="0" height="30" width="30" /></svg> world!</p>
<span>Hello <svg viewBox="0 0 30 30" class="heightByFontSize"><rect x="0" y="0" height="30" width="30" /></svg> world!</span>

【讨论】：

嗨。如果放大，您会看到 SVG 超出文本大小 i.ibb.co/TrnQJ98/size.png
正方形的顶部应该在哪里？正方形的底部应该在哪里？
我需要红色线之间的正方形
当然。只需更改高度即可。
是的，它有效，谢谢。看起来很奇怪，但没有更好的解决方案