How to remove shapes from filled SVG path

thatOneGuy

I have this fiddle : https://jsfiddle.net/thatOneGuy/1spn8nne/1/

This has two paths, for now, they are just rect but are actually complicated shape. I have used this code to create two rects with 'holes' in :

createRects(dataPointsPath2, 'blue');
createHoles(dataPointsCircle2);
createRects(dataPointsPath1, 'red');
createHoles(dataPointsCircle1);

What I need are the holes to be removed from the filled path so you can see the rect behind it.

How do I go about removing a shape (circle) from a filled path ?

EDIT

I have just realised, a clip path will probably work well for this, I'll try implement but if someone has any ideas I'd appreciate the help :)

Robert Longson

Here's one way to draw a rect with a hole in. It relies on the evenodd fill-rule. The circle is inside the rect it becomes a hole in the rect and the blue background shows through.

  <svg viewBox="0 0 250 250">
  <rect width="100%" height="100%" fill="blue"/>
    <path fill="#b4edb4" fill-rule="evenodd"  d="M230,230H8V13h223
	 V236z M 120 80 a 50 50 0 1 0 0.00001 0z"/>
</svg>

Collected from the Internet

Please contact [email protected] to delete if infringement.