2

長方形の外側にあるものはすべて非表示にしたい。（これはクリッピングで成功しました）。ただし、別の条件は、「黒い大きな円の内側にあるものもすべて非表示にする」ことです。どうすればそれを達成できますか？

以下の例では、「黄色い円」を削除する必要があります。

詳細については、下の画像を参照してください

  • オリジナル：-

オリジナル

希望:-

望ましい

以下は私のSvgコードです:-

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
<g>
 <rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/>
 <circle cx="180" cy="150" r="30" stroke="blue" />
</g>

<g clip-path = "url(#clip1)">
  <circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" />
</g>

<clipPath id = "clip1">
             <rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/>
        </clipPath>

</svg>
4

1 に答える 1

0

Erik Dahlström の言うとおりです。クリップには、長方形全体と円の切り抜きを含めることができます。#clip1このように、として関連付けたものはすべてclip-path、サークル エリア内には表示されません。あなたの例では次のようになります。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
<g>
 <rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/>
 <circle cx="180" cy="150" r="30" stroke="blue" />
</g>

<g clip-path = "url(#clip1)">
  <circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" />
</g>

<clipPath id = "clip1">
   <path d="M 50,50 l200 0 l0 200 l-200 0z M150,150 a30,30 1 0,0 60,0z M210,150 a30,30 1 0,0 -60,0z"/>
</clipPath>

于 2015-03-04T04:27:58.277 に答える