svg的SVG和父高度不同

Question

我在页面中的height: 50px;（未指定样式）内部有SVG元素（div）。但是，父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差异的原因吗？

谢谢，Viji

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

Answer 2

我有其他解决方案对我有用。您只需将父元素显示设置为flex：

#parentele {
  display: flex;
}

只有这样

Answer 3

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