Handling onClick with unusual shapes

Author: Rafał Kornel

Problem context

Sometimes we want to add into our application unusual shapes - they can be everything, starting from circles, ellipses, or any valid SVG path. To do that, we usually embed them as SVG element, inside our HTML structure. Sometimes we want user to be able to interact with these shapes. Handling onClicks on <div /> (or other non-SVG tags) is simple, but some problems might arise, when we want to attach click event handlers to SVG shapes. This article is aimed to resolve problem with overlapping boxes, and allow developer to create interactions with any unusual (SVG) shape.

Example design: