1

clip-path を使用して 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>

したがって、白い部分が切り取られて、青と黒の部分だけが見えるようになります。切り抜いた部分を透明にしたいので、丸くしなければなりません。

4

1 に答える 1

3

円の反転は、円をパスに変換した場合にのみ機能します。次に、d 属性で 2 つのパスを指定する必要があります。最初のものは円全体を覆う長方形です:

400x400 ピクセル:

M0,0H400V400H-400z

2 番目のパスは、切り取られる円です。

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 に答える