SVG和SVG的父高度不同

Question

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

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

我得到的$('#parentele').height() 是 55并且$('#svgele').height() 是 50。如果我使用divelement 而不是 SVG，则高度将相同。我可以知道 SVG 情况下 5px 差异的原因吗？

谢谢，维吉

Answer 1

SVG 元素是内联元素，用于呈现文本，因此元素下方（基线下方）为字母降序保留了一些空间。

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

1. 将其更改为块级元素：

   svg {
       display: block;
   }
   

2. 浮动元素：

   svg {
       float: left;
   }
   

3. 消除容器的行高：

   #parentele {
       line-height: 0;
   }
   

将其与参考演示进行比较。