html - SVG 曲线的负

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

所以，像这样？ http://jsfiddle.net/0nw862zf/8

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