How to connect two intersecting polygons in svg?

Question

Geometry

Problem of the following kind.
- The user has the ability to select a polygon manually point by point.
- It also has the ability to select as many polygons as you like.
- Polygons can overlap each other.
- The polygon has a translucent background, which, when overlapped, darkens in direct proportion to the number of overlays.
- The polygon does not overlap itself, there are no problems with this, it takes over svg.
- one path (path) can contain many polygons. In this case, the overlay rules described in w3 apply ( www.w3.org/TR/SVG/painting.html#FillRuleProperty) - can someone explain how to use it in practice. In short, if you specify evenodd - we are guaranteed to get a "donut", i.e. all overlaps will invert, roughly speaking, the presence of color in the resulting new polygons. If not specified, the default nonzero rule works, the behavior of which depends on the direction of the lines that a certain ray crosses, launched from a certain point to infinity. Roughly speaking, if you take two convex polygons, both drawn in the same direction (clockwise / counterclockwise), then they will merge normally. If in different directions, then with "cutting holes". It would seem that it is enough to determine the direction of the intersected segments, and, in case of a difference in directions, simply invert it, but something is not so simple (complex polygons, complex intersections).
- For rendering I use Raphaeljs. It can determine whether polygons intersect and return the intersection points, segment numbers (serial number in the order of drawing the figure), where the intersection occurs, the coordinates of the beginning and end of these segments.
- on the background of the picture, if that.
Any thoughts are welcome.
Even non-standard ones ;) For example, maybe the simplest solution is to glue two opaque polygons together, transfer them to a raster and back to a vector as a single polygon.
UPD: it seems that the polygon can still overlap itself with cutting holes, with rather complex paths. In this case, you need a convex polygon (using all points that "touch" outer space) with no holes . You
can try it here: jsfiddle.net/extempl/wkyyhkht

Answer 1

Make a semi-transparent background of the same color, and apply the drawn polygons to it as a mask.