高度 svg 按字体大小

Question

我在网站上有很多文本，有时我需要在文本中添加 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{
    // ????
}

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