html - 为什么 100% 等于 150 像素？

Question

以下代码生成一个 150 像素高的表格。为什么是 150？这是 SVG 怪癖还是更普遍的东西？

https://jsfiddle.net/cc9tyw5v/31/

<table class="root" cellspacing="0">
  <tr>
    <td>
      <svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none" style="height:100%;background-color:lightgreen;">
        <text x="0" y="6.5" font-size="9px">a</text>
      </svg>
    </td>
    <td><span style="font-size:2em;background-color:lightblue">I would expect it to be as tall as this span</span></td>
  </tr>
</table>

Answer 1

根据 this source

SVG isn't (just) an image. SVG is a document. The default size for HTML replaced elements will be used: 300px wide, 150px tall. This applies for <img>, <object> or <iframe>. The default 300x150 size also applies to inline <svg> elements within HTML documents, but that's a relatively recent consensus from the HTML5 specifications: other browsers will by default expand inline SVG to the full size of the viewport—equivalent to width: 100vw; height: 100vh; — which is the default size for SVG files that are opened directly in their own browser tab. Internet Explorer cuts the difference, using width of 100% and height of 150px for images and inline SVG.