How to remove shapes from a filled SVG path

Question

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

This has two ways, at the moment they are just straight, but actually a complex form. I used this code to create two rectangles with “holes” in:

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

I need holes that need to be removed from the filled path so you can see the strand behind it.

How can I remove a shape (circle) from a filled path?

EDIT

I just realized that the clip path will probably work well for this, I will try to implement it, but if anyone has any ideas, I will be grateful for the help :)

Answer 1

. evenodd. , , .

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

Hide result

Answer 2

@ , , D3. , @PaulLeBeau .

rect, , . , , ( ).

var thisMask = thisContainer.append("svg:mask")
    .attr("id", board + '_mask')

  thisMask.append("rect")
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', "100%")
    .attr('height', "100%")
    .style('fill','white')

, .

:

thisMask.selectAll('.circle')
    .data(data)
    .enter()
    .append("circle")
    .attr('cx', function(d) {
      console.log('clippath', d)
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    })
    .attr('r', function(d) {
      return d.radius
    })

. : https://jsfiddle.net/thatOneGuy/1spn8nne/4/