响应式 SVG（相同字体大小）作为内联块

Question

我写了一本手册来解释不同立方体值（1 到 6）的含义。

所以我将立方体创建为 SVG，并在我的 html 中使用 svg 作为内联。我的目标是视图框或 SVG 在没有 javascript 的情况下具有响应性。因此，当我将

p.para

的字体大小从 0.5rem 更改为任何其他大小时。立方体应遵循文字大小。

我试过有

<span>

和没有它。

这里是 HTML 代码（立方体只是一个矩形）

p.para {
  text-align: justify!important;
  font-size: 0.5rem;
}

p.para span {
  display: inline-block; 
  width: 1rem; 
  height: 1rem;
}

p.para svg {
  height: 1rem;
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}

<p class="para">
  bla bla foo bar foobar bla bla
  <span>
    <svg viewBox="0 0 20 20" >
      <rect width="20" height="20" rx="5" 
      fill="blue" />
    </svg>
  </span>
  bla bla foo bar foobar bla bla.
  More text and even more text.
</p>

目前 SVG 始终具有相同的大小，并且与

p

字体大小无关或响应。

Answer 1

感谢 CBroe 我能够修复它。

甚至代码现在也更简单了。 :-)

• 我删除了子选择器

  >

• 我完全删除了

  <svg>

  的样式

p.para {
  text-align: justify!important;
  font-size: 3rem;
}

p.para span {
  display: inline-block; 
  width: 1em; 
  height: 1em;
}

<p class="para">
  bla bla foo bar foobar bla bla
  <span>
    <svg viewBox="0 0 20 20" >
      <rect width="20" height="20" rx="5" 
      fill="blue" />
    </svg>
  </span>
  bla bla foo bar foobar bla bla.
  More text and even more text.
</p>