How to cut a hole in an SVG rectangle [duplicate]

You should be able to use the fill-rule: evenodd(default) property to achieve this effect, if you want to prevent the fill of the rectangle from painting where the circle is. See this example from the SVG specification:

A pentagram and two circles, filled in red, with the centers cut showing the white background

The key point is draw outer shape and inner shapes(holes) in different direction (clockwise vs anti-clockwise).

  • Draw the outer shape clockwise and draw the inner(holes) shapes anti-clockwise.
  • Or conversely, draw the outer shape(holes) anti-clockwise and draw the inner shapes clockwise.
  • Concat the path datas of outer shape and inner shapes(holes).

You can cut more holes by concat more hole path data.

This image explain how to cut a hole:

enter image description here

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)