html - 使 SVG 元素具有贪婪的高度

Question

我试图在纯 CSS 中显示带有参数的平方根。我目前的努力就在这里:

https://jsfiddle.net/29L4ehef/62/

但它仅在参数具有特定字体大小时才有效。当我增加字体大小时，平方根符号不再保持垂直。我可以更改什么以使 unicode 平方根符号跟上参数的高度？请注意，在我的元素中，我无法预测平方根参数中的内容。它最终可能会变成一个很高的分数，等等。所以我希望有一种方法可以让 SVG 元素与参数的高度保持同步。

非常感谢!

<span>
  <svg width="5em" height="2em" class="symbol" class="square-root-symbol" viewBox="0 0 10 14" preserveAspectRatio="xMinYMin">
    <text x="0" y="14" font-size="15px">√</text>
  </svg>
  <span class="argument">
    A
  </span>
</span>

.symbol {
  height: 5em;
  width: 3.4em;
  margin-right: -0.4em;
  vertical-align: middle;
}

.argument {
  font-size: 4em; /* CHANGE ME - ONLY WORKS FOR 4em */
  border-top: .05em solid black;
  padding-left: .15em;
  padding-right: .25em;
  vertical-align: middle;
}

Answer 1

这就是我更改您的 HTML 的方式:

<span class="symbol-container">
  <svg  class="symbol" class="square-root-symbol" viewBox="0 0 10 14" preserveAspectRatio="xMinYMin">
    <text x="0" y="14" font-size="15px">√</text>
  </svg>
  <span class="argument">
    A
  </span>
</span>

和 CSS:

.symbol-container {
  position: relative;
  display: block;
  height: 10em;
}

.symbol {
  display: block;
  float: left;
  height: 100%;
  width: auto;
}

.argument {
  display: block;
  float: left;
  font-size: 10em; /* CHANGE ME - ONLY WORKS FOR 4em */
  border-top: 5px solid black;
  vertical-align: top;
  line-height: 1;
  margin-left: -5px;
}