CODEWITHSUNDEEP
htmlsvg
nick zoum
nick zoum

Reputation: 7295

SVG Path remove intersection

I was trying to convert the following nested circles into nested rectangles, where the intersection of the two shapes would negate each other. But In the rectangle example they just overlap. I know this can be by adding more points, instead of having two rectangles, but I want to get the grasp of "holes" inside a single path.

<svg viewBox="0 0 500 500">
        <path fill="blue" stroke="black" d="M100 100m-75,0a75,75,0 1,0 150,0a 75,75 0 1,0 -150,0zM100 100m-40,0a40,40,0 0,1 80,0a 40,40 0 0,1 -80,0z"/>
      </svg>

<svg viewBox="0 0 500 500">
  <path d="M 10, 10 l 100, 0 l 0, 50, l -100, 0 z M 50, 20 l 100, 0 l 0, 50, l -100, 0 z" fill="blue" stroke="black" />
</svg>

Upvotes: 1

Views: 328

Answers (1)

Michael Rovinsky
Michael Rovinsky

Reputation: 7210

Here is an example of self-negating single path. It has two closed contours:

  • The external (union of rects) is clockwise
  • The internal (intersection of rects) is counter-clockwise.

Both start with M and end with Z directive.

<svg>
  <path d="M 10,10 H 100 V 50 H 200 V 150 H 50 V 100 H 10 Z M 100,50 H 50 V 100 H 100 Z" fill="blue"/>
</svg>

Upvotes: 1

Related Questions