Highlighting SVG elements?

Question

css

Hello!
There are few SVG elements.
Curvilinear.
But the contours of all these elements are the same, rectangular.
They are all in the same container, all have position:absolute, and all rectangles match each other.
Those. when hovering, we get to the rectangle in which the figure is inscribed.
Interested in how to make their contours also curvilinear, so that we can hover over each element individually. And they didn't overlap.
Alternatively, would it be better to do this on Canvas? Don't know. Or what converter can eat from SVG to Canvas? I looked on the Internet, found some service, but somehow I didn’t like it very much.
Or if not Canvas, then somehow cut off SVG.
Or css clip-path?
here is an example.
https://codepen.io/mk3mk/pen/qBErqBW?editors=1100