1

我一直在试图弄清楚如何使用剪辑路径从 div 中切出一个圆圈。我创建了一个有点反向工作的演示，但它并没有完全符合我的要求：http: //jsfiddle.net/5eeedebkn/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>

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

4

1 回答 1

3

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

400x400 像素：

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/

于 2015-09-09T11:22:51.450 回答