为什么我的 svg 路径放在 div 中时没有显示？答案

【问题标题】：Why isn't my svg path showing up when I put it in a div?为什么我的 svg 路径放在 div 中时没有显示？
【发布时间】：2020-07-05 03:32:45
【问题描述】：

我的 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>

当我进入页面的检查元素时，SVG 位于正确的位置，但只是没有显示。我做错了什么？

【问题讨论】：

标签： html css svg

【解决方案1】：

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

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

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

【讨论】：