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

我相信，在<svg>元素上使用background-color可以在所有最新的浏览器版本中使用，但不适用于所有浏览器的旧版本。

如果向后兼容性对您很重要，那么更好的解决方案是：

• 用<div>包围SVG并赋予背景色，或者
• 向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>