Filling up remaining space in svg

Question

I tried to create an svg and adding path to it.

Here is my jsfiddle

Now, as you can see, I managed to create a down facing triangle but what I am not able to do is filling up the rest of the space(white colored) inside the svg with some other color(say black). How do I do that?

Here is my HTML

<svg id="bigTriangleColors" width="100%" height="100" 
viewBox="0 0 100 102" preserveAspectRatio="none">
  <path d="M0 0 L50 100 L100 0 Z"></path>
</svg>

and CSS

#bigTriangleColors {
fill: #E1EAEF;
position: relative;
}
svg:not(:root) {
overflow: hidden;
}

Thank you for your help!

Answer 1

I don't know If I understood correctly, but have you just tried to set the background color on svg

svg {
    bacground-color: black;
}

like in this fiddle http://jsfiddle.net/Luoq4Lcz/ ?

Does that solve your problem?

Answer 2

Using background-color on <svg> element works (I believe) in all the latest browser versions, but it didn't work on older versions of every browser.

If backwards compatibility is important to you, then a better solution would be to either:

• surround the SVG with a <div> and give that a background colour, or
• add a rectangle of the desired colour to the SVG itself:

 <svg id="bigTriangleColors" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none"> <rect width="100%" height="100%" fill="black"/> <path d="M0 0 L50 100 L100 0 Z" fill="red"></path> </svg>