Question

我的问题在以下小提琴中被捕获：https://jsfiddle.net/byer5pfq/ 我试图用纯html / css实现数学表达式的渲染，我需要根据参数垂直拉伸平方根 - 所以我使用SVG进行自动拉伸。但是，当平方根的参数不够高时，SVG仍然会延伸到150px（Why does 100% equal 150 pixels?）。我使用表格，因为表格布局通常可以让您匹配内容高度。

非常感谢有关如何实现目标的任何建议！

<span class="equation" style="display:inline">
  <table class="root" cellspacing="0">
    <tr>
          <td>
              <svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none">
                  <text x="0" y="6.5" font-size="9px">&#8730;</text>
                </svg>
          </td>
          <td>
              <span class="root-argument">
                  <span class="variables">Ax</span>
              </span>
          </td>
     </tr>
  </table>
</span>

.equation {
  font-size: 30px;
}

svg {
  display: inline-block;
}

span.variables {
  vertical-align: middle;
}

span {
  display: inline-block;
  vertical-align: middle;
}

tr {
  margin: 0;
  padding: 0;
}

td {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

span.root-exponent {
  height: calc(70% + .6em);
  font-size: .6em;
  vertical-align: bottom;
  text-align: right;
  margin-right: -1em;
  width: 1em;
}

table.root {
  /*    position: relative; */
  display: inline-block;
  vertical-align: middle;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

svg.root-symbol {
  vertical-align: middle;
  width: .9em;
  height: 100%;  /* Need it to strech when .root-argument is tall!!! */
}

span.root-argument {
  margin-left: -1px;
  padding-top: .05em;
  /* Clearance for the bar */
  padding-left: .1em;
  /* A little space on the left */
  padding-right: .2em;
  /* A little more on the right */
  border-top: 0.073em solid black;
  /* that's the bar */
  height: 100%;
}

Answer 1

现代浏览器可以使用MathJax，MathML或AsciiMath，绕过头痛的CSS＆amp; JS操纵。方程可以纯粹用SVG绘制，但是将它与HTML混合不推荐（格式化太复杂了！）。

下面是一个示例MathJax嵌入到您的表中但没有所有CSS格式。高度可读，易于编辑，并受到许多browsers的支持。

＆＃13;

<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<span class="equation" style="display:inline">
  <table class="root" cellspacing="0">
    <tr>
		  <td>

		  </td>
			<td>
			  <span class="root-argument">
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>x</mi> <mo>=</mo>

        <mo>&#x00B1;</mo> <!-- plus-minus sign -->
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>&#x2212;</mo> <!-- long-dash -->
          <mn>4</mn><mi>a</mi><mi>c</mi>
        </msqrt>


</math>
        </span>
      </td>
    </tr>
  </table>

＆＃13;

Answer 2

出于与您的其他问题相同的原因。

您已指定SVG为100％高度。这意味着100％父母的身高。在您的示例中，这是<td>。但是<td>没有明确的高度。它从孩子身上得到了它的高度。

因此，由于无法确定高度，因此SVG默认为150px的默认固有高度。所以<td>也获得了这个高度。

如果你想使用＆＃34; 100％＆＃34;对于高度，那么SVG的父母必须具有明确的高度（例如td { height: 30px; }），或者受到其他一些因素的限制。

<强>更新

解决此问题的一种方法是设置SVG的容器（即＆＃34; root＆＃34;）以使用相对定位。然后，如果你将SVG设置为使用绝对定位，那么＆＃34; root-argument＆＃34; element将控制容器的高度。然后，您可以安全地将SVG设置为100％高度。

＆＃13;

.equation {
  font-size: 30px;
}

svg {
  display: inline-block;
}

.root {
  position: relative;
}

svg.root-symbol {
  position: absolute;
  width: .9em;
  height: 100%;  /* Need it to strech when .root-argument is tall!!! */
}

.root-argument {
  display: inline-block;
  margin-left: 0.9em;  /* leave space for the absolutely positioned SVG */
  
  padding-top: .05em;
  /* Clearance for the bar */
  padding-left: .1em;
  /* A little space on the left */
  padding-right: .2em;
  /* A little more on the right */
  border-top: 0.073em solid black;
  /* that's the bar */
}

＆＃13;

<div class="equation">
  <div class="root">
    <svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none">
      <text x="0" y="6.5" font-size="9px">&#8730;</text>
    </svg>
    <div class="root-argument">
      <span class="variables">Ax</span>
      <br/>
      <span class="variables">Bx</span>
    </div>
  </div>
</div>

＆＃13;

如何让SVG元素垂直拉伸？

2 个答案: