如何排除Svg中的clippath區域

我想隱藏矩形外的任何東西。（這我已成功完成裁剪）。但另一個條件是，「也隱藏了黑色大圓圈內的任何東西」。現在我該如何實現這一目標？如何排除Svg中的clippath區域

在下面的例子中，'黃圈'必須被消除'。

看到以下圖片查看詳細

原文： -

Original

期望： -

Desired

下面是我的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>

來源

2013-07-16 RashFlash

總是黑圈不透明？如果是這樣，你並不需要使用剪裁，只要確保把它放在最上面。 –

不是。要點是如何隱藏那個黑圈的邊界內的任何東西。 – RashFlash

那麼有什麼問題 - 像Erik建議的那樣，在所有其他事物上繪製圈子？ –

埃裏克·達爾斯特羅姆是正確的，你的夾子可以包括整個矩形和圓形切口。通過這種方式，您與#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-04 04:27:58

如何排除Svg中的clippath區域

回答

相關問題