thatOneGuy thatOneGuy - 4 months ago 24
Javascript Question

How to remove shapes from filled SVG path

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

Answer

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

Comments