SVG的负曲线<path> </path>

Question

我有很多时间来创造这个svg / path曲线的负面效果。

我喜欢的是白色是<path>所描述的填充部分，而蓝色对于背后的元素是透明的 - 与当前描述完全相反。

非常感谢任何想法！

http://jsfiddle.net/CG_Pilot/0nw862zf/6/

<svg class="curveDownColor curveDown" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="50" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0 0 C 50 100 80 100 100 0 Z"></path>
</svg>

使用这个CSS：

.curveDownColor {
    fill: blue;
    stroke: yellow;
    stroke-width: 3px;
    border: 2px dashed green;
}

http://jsfiddle.net/CG_Pilot/0nw862zf/2/embedded/result/

Answer 1

svg有viewBox，所以我们可以通过rect路径包裹路径形状来反转填充区域 （有时需要填充规则属性。）

<svg class="curveDownColor curveDown" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="50" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M-100,-100h300v300h-300zM0 0 C 50 100 80 100 100 0 Z"></path>
</svg>

Answer 2

那么，像这样？ http://jsfiddle.net/0nw862zf/8

我所做的只是在这里添加框边界到路径。因此，不要在路径末尾使用Z，而是使路径遵循L 100 100, L 0 100，然后 Z

的边界