Question

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

但它仅在参数具有特定字体大小时才有效。当我增加字体大小时，平方根符号不再垂直保持。我可以更改什么，以便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;
}

Answer 2

解决方案是为SVG提供相对于当前字体大小的大小：

.equation {
  font-size: 4em;
}

.symbol {
  width: 0.75em;
  margin-right: -0.4em;
  vertical-align: middle;
}

.argument {
  border-top: .05em solid black;
  padding-left: .15em;
  padding-right: .25em;
  vertical-align: middle;
}

<span class="equation">
  <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>

使SVG元素具有贪婪的高度

2 个答案: