Почему мой путь svg не отображается, когда я помещаю его в div?

Question

У меня проблема с svg path. Я хочу, чтобы он располагался в самом низу элемента 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>

Когда я go в элементе проверки страницы, SVG находится в нужном месте, но он просто не отображается. Что я делаю не так?

Answer 1

У тебя svg все в порядке. Проблема связана с его родительским узлом div#title-heading и его высотой.

Если вы установите для высоты элемента использование относительного размера (%), его родительский элемент должен иметь явно определенную высоту (либо с px, ..., либо с с % - в этом случае его родитель также должен иметь определенную высоту).

Вы можете проверить это, задав #title-heading явную высоту (например, height: 350px; - или сколько вам нужно), или указав #title-heading родительский точный рост.