Заполнение оставшегося пространства в svg

Question

Я попытался создать SVG и добавить путь к нему.

Вот мой jsfiddle

Теперь, как вы можете видеть, мне удалось создать вниз лицом треугольника, но то, что я не в состоянии сделать, заполняя остальное пространство (белого цвета) внутри SVG с другим цветом (например, с черным). Как мне это сделать?

Вот мой 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> 

и CSS

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

Спасибо за вашу помощь!

Answer 1

Я не знаю, если я правильно понял, но вы просто пытались установить цвет фона на SVG

svg { 
    bacground-color: black; 
} 

как в этой скрипке http://jsfiddle.net/Luoq4Lcz/?

Это решение проблемы?

Answer 2

Использование background-color на <svg> Элемент работает (я считаю) во всех последних версиях браузера, но он не работал в более старых версиях каждого браузера.

Если обратная совместимость важна для вас, то лучшим решением будет либо:

• окружают SVG с <div> и дать, что цвет фона, или
• добавить прямоугольник желаемого цвет самого SVG:

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