Accepted answer

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


@Robert Longson gave a nice answer but I was unable to duplicate it using my dataset and D3. So, thanks to @PaulLeBeau for his point about masks.

For the mask, you need a rect element, filled white for it to work. It uses this to know what to mask against(I think).

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

    .attr('x', 0)
    .attr('y', 0)
    .attr('width', "100%")
    .attr('height', "100%")

And in the same mask element, you need the rest of the shapes you want to remove from the path.

So in my case, I wanted a collection of circles :

    .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

And that's it. I have updated the fiddle :

Related Query

More Query from same tag