html - SVG 和 svg 的父高度不同

Question

我在页面的 div(未指定样式)内有 SVG 元素(height: 50px;)。但是，父 div 的 height 值与 SVG 不同 5px。

<div id="parentele">
    <svg id="svgele" style="height:50px"></svg>     
</div>

我得到了 $('#parentele').height() 是 55 和 $('#svgele').height() 是 50。如果我使用 div 元素而不是 SVG，高度将相同。我可以知道 SVG 大小写 5px 差异的原因吗？

谢谢，维吉

Answer 1

SVG 元素是内联元素，用于呈现文本，因此在元素下方(基线下方)为字母下行保留了一些空间。

您可以通过多种方式解决此问题:

1. Change it to block level element :

   svg {
       display: block;
   }
   

2. Float the element :

   svg {
       float: left;
   }
   

3. Eliminate the line height of the container :

   #parentele {
       line-height: 0;
   }
   

将其与 reference demo 进行比较.