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>可以在所有最新的浏览器版本中运行（我相信），但它并不适用于每个浏览器的旧版本。

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

使用<div>围绕SVG并为其指定背景颜色，或
将一个所需颜色的矩形添加到SVG本身：

＆＃13;

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

＆＃13;

填补svg中的剩余空间

2 个答案: