Question

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

<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不是（只是）一张图片。 SVG是一份文件。将使用HTML替换元素的默认大小：300px宽， 150px高。这适用于<img>，<object>或<iframe>。默认 300x150 大小也适用于HTML文档中的内联<svg>元素，但这是HTML5规范中相对较新的共识：其他浏览器默认情况下将内联SVG扩展为完整视口的大小 - 相当于宽度：100vw;身高：100vh; - 这是直接在自己的浏览器选项卡中打开的SVG文件的默认大小。 Internet Explorer使用100％的宽度和 150px的高度来缩小图像和内联SVG。

Answer 2

您尝试拟合高度的范围不是SVG的父级。这是一个兄弟姐妹，因此height:100%不适合它的高度。

为什么100％等于150像素？

2 个答案: