2

I want to hide anything that outside a rectangle. (this i have achieved with clipping successfully). but another condition is that, 'also hide anything that comes inside the black big circle'. Now how i can achieve that?

in below example, 'yellow circle' must be eliminated'.

see below images for detail

  • Original:-

Original

Desired:-

Desired

Below is my Svg code:-

<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>
RashFlash
  • 992
  • 2
  • 20
  • 40
  • 2
    Is the black circle always opaque? If so, you don't really need to use clipping, just make sure to put it on top. – Erik Dahlström Jul 16 '13 at 07:43
  • Not really. Point is how to hide anything that's inside the boundary of that black circle. – RashFlash Jul 16 '13 at 22:43
  • So what's wrong with - draw the circle on top of everything else as Erik suggests? – Robert Longson Jul 17 '13 at 01:13
  • That solution is applicable only if circle is filled. What if circle attribute 'fill' set to 'none'. In other words its transparent. Now how i can clip or hide elements? One solution would be to loop for each element and check whether it resides in circle or not. This is not good. :( – RashFlash Jul 17 '13 at 08:17
  • This question is rather similar: http://stackoverflow.com/questions/3742479/how-to-cut-a-hole-in-an-svg-rectangle (the thing is that you need to create an "inverse" clippath to do this, and the other question shows how to do that) – Erik Dahlström Jul 17 '13 at 08:22
  • I have solved the Problem by doing what Erik has said i.e. 'just make sure to put it on top' . thanks alot Erik. wooooo – RashFlash Jul 29 '13 at 05:29

1 Answers1

0

Erik Dahlström is right, your clip can include the entire rectangle and the cutout for the circle. This way, anything you associate with #clip1 as the clip-path will not be visible inside your circle area. Here is what it looks like for your example:

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

Jordan Read
  • 131
  • 5