Svg masks / clipping path woes

Question

here is a fiddle to show my current working of svg:

http://jsfiddle.net/r3plica/g046qfyq/

As you can see, I have added two circles which are masking the content behind. The mask is working as I want, but! I would like to change the background of the all of it to rgba(0,0,0,0.5).

At the moment I added:

background-color: pink;

this is applied to the .mask class and has colored in the circles. What I want to do is colour in everything but the circles.

Here is an image explaining what I mean.

If anyone can help me with this, that would be super :)

Update 1

I am trying to create this:

I have this fiddle now:

http://jsfiddle.net/r3plica/g046qfyq/2/

If I could invert the clipping path, that would be the solution. Is there anyway to do this?

Cheers.

Answer 1

Just change your svg clippath to a mask, add a white rectangle to cover all your area and set the circles in black.

<mask id="myMask">
  <rect x="0" y="0" width="1000" height="1000" fill="white"/>
  <circle cx="30" cy="30" r="20" fill="Black"/>
  <circle cx="200" cy="200" r="100" fill="Black" />
</mask>

and use it with the mask css property.`

.mask {
  mask: url(#myMask); 
}

you can improve it a bit by placing both the mask and the content in a container with position:relative and then adding position:absolute to your .modal class.

Answer 2

Just wrap everything with div and apply rgba(0, 0, 0, 0.5) as background-color. http://jsfiddle.net/Justinas_Jurciukonis/g046qfyq/3/

EDIT
Why not just use overlay with dark background color and css image of rectangle with hole inside of it? Than just use background-position to move that circle in page.