Question

我一直试图弄清楚如何使用剪辑路径从div中剪切一个圆圈。我创建了一个反向运行的演示，但它并没有完全符合我的要求：http://jsfiddle.net/5eedebkn/2/

我还没有弄清楚如何获得剪辑路径到＆＃34;插入＆＃34;使用椭圆时的切出区域。

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

M0,0H400V400H-400z

第二条路径是将被切除的圆圈。

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

此圆圈从x = 20开始，y = 0，半径为200px。我使用在线工具进行转换。

放在一起你有这个，并将它用作你的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/

如何使用CSS中的clip-path从椭圆切出椭圆？

1 个答案: