CODEWITHSUNDEEP
htmlcsssvg
atgberg
atgberg

Reputation: 1

Why isn't my svg path showing up when I put it in a div?

I'm having a problem with an svg path. I want it to be positioned at the very bottom of a div, as a bottom border, but when I put it in the div, it doesn't show up. My HTML looks like this:

#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>

When I go into the inspect element of the page, the SVG is in the right place, but it's just not showing up. What am I doing wrong?

Upvotes: 0

Views: 1062

Answers (1)

Kox
Kox

Reputation: 853

Your svg is doing fine. Problem lies with its parent div#title-heading node and its height.

If you set your element's height to use relative size (%), its parent needs to have explicitly defined height (either with px, ... or with % - in that case, its parent needs to have defined height as well).

You can test this by giving #title-heading explicit height (e.g. height: 350px; - or how much you need), or by giving #title-heading's parent exact height.

Upvotes: 2

Related Questions