如何使用 CSS 中的剪辑路径从椭圆中切出一个椭圆？

Question

我一直在试图弄清楚如何使用剪辑路径从 div 中切出一个圆圈。我创建了一个可以反向工作的演示，但它并没有完全按照我的意愿工作：http://jsfiddle.net/5eedebkn/2/

我无法弄清楚如何在使用椭圆时让剪辑路径“插入”剪切区域。

body    {
    background: rgb(0,0,0);
}

.claw    {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 300px;
    height: 300px;
    background: rgb(255,255,255);
    border-radius: 50%;
    -webkit-clip-path: circle(90% at -20% -20%);
    clip-path: circle(90% at -20% -20%);
    z-index: 5;
}
.circle    {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 300px;
    height: 300px;
    background: rgb(35,155,215);
    border-radius: 50%;
    -webkit-clip-path: url(#c1);
}
<div class="claw"></div><div class="circle"></div>

所以白色的部分最终应该被剪裁，这样你就可以看到蓝色和黑色的部分。我希望切出的部分是透明的，并且必须是圆形的。

Answer 1

仅当您将圆转换为路径时，反转圆才有效。然后在 d 属性中你需要指定两个路径。第一个是一个覆盖整个圆圈的矩形：

400x400 像素：

M0,0H400V400H-400z

第二条路径是要剪掉的圆。

M-180,0a200,200 0 1,0 400,0a200,200 0 1,0 -400,0

这个圆从 x=20，y=0 开始，半径为 200 像素。 我使用了一个在线工具来转换它。

把你有的放在一起，并将它用作你的 css 中的剪辑路径：

<svg>
    <defs>
        <clipPath id="circle">
            <path d="M0,0H400V400H-400zM-180,0a200,200 0 1,0 400,0a200,200 0 1,0 -400,0" />
        </clipPath>
    </defs>
</svg>

CSS：

clip-path:url(#circle);

http://jsfiddle.net/5eedebkn/6/