Filling up remaining space in svg - html

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>