SVG和svg的父高度不同

Question

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

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

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

谢谢， 维吉

Answer 1

我还有其他适合我的解决方案。您只需要将父元素显示设置为 flex：

#parentele {
  display: flex;
}

只有这样

Answer 2

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比较。

Answer 3

svg 元素的大小不仅仅是determined 的宽度和高度。所以对于周围 dev 元素的高度，svg 的填充、边框和边距也很重要。