为什么我将svg路径放入div时不显示？

Question

我在使用svg路径时遇到问题。我希望它位于div的最底部，作为底部边框，但是当我将其放在div中时，它不会显示。我的HTML看起来像这样：

#title-heading {
  margin: 0;
  padding: 0;
  background-image: url("img/gallery/2.jpg");
  background-position: top;
  background-attachment: fixed;
  background-size: 110%;
  width: 100%;
  height: 40%;
  position: relative;
}
#bottom-border {
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0;
}

<div id="title-heading" style="position: relative">
  <svg version="1.1" id="bottom-border" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 415.618 34.801" enable-background="new 0 0 415.618 34.801">
    <path fill=red d="M415.618,0 v34.801 H0 V0 c0,0,75.868,23.833,207.809,23.833 C339.751,23.833,415.618,0,415.618,0z"></path>
  </svg>

</div>

当我进入页面的inspect元素时，SVG位置正确，但是没有显示出来。我在做什么错？

Answer 1

您的svg很好。问题在于其父级div#title-heading节点及其高度。

[如果将元素的高度设置为使用相对大小（%），则其父级必须具有明确定义的高度（使用px, ...或%-在这种情况下，其父级需要定义的高度为好）。

您可以通过给#title-heading明确的高度（例如height: 350px;-或您需要多少），或给#title-heading的父级精确高度进行测试。