小svg推到外面的容器

Question

我有一个小的内联svg图像，由于某种原因被推到容器外面。 除了svg本身之外，没有任何东西可以设置容器的高度。

在此处查看 https://jsfiddle.net/xv5jeLpk/4/

<div class="button">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 8">
  </svg>
</div>

容器div的红色背景不应该是可见的。

Answer 1

您可以使用svg上的display: block删除顶部和底部的空白区域，默认情况下显示为内联。额外空间来自外部容器的默认行高，该行高大于svg的高度。