thatOneGuy thatOneGuy - 1 year ago 135
Javascript Question

How to remove shapes from filled SVG path

I have this fiddle :

This has two paths, for now, they are just

but are actually complicated shape. I have used this code to create two
in :

createRects(dataPointsPath2, 'blue');
createRects(dataPointsPath1, 'red');

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 ?


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

Answer Source

Here's one way to draw a rect with a hole in. It relies on the evenodd fill-rule. The rect is drawn clockwise and the elliptical arc which forms the circle is drawn anticlockwise so 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"/>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download