Всем привет!
Есть немного SVG элементов.
Криволинейных.
Но контуры у всех этих элементов - одинаковые, прямоугольные.
Они все находятся в одном контейнере, у всех position:absolute, и все прямоугольники совпадают друг с другом.
Т.е. при наведении мы попадаем на прямоугольник, в который вписана фигура.
Интересует, как сделать их контуры так же криволинейными, чтобы мы могли наводить на каждый элемент по отдельности. И они не перекрывали друг друга.
Как вариант, может быть лучше делать такое на Canvas? Не знаю. Или какой конвертер может есть из SVG в Canvas? Я смотрел в интернете, нашел какой-то сервис, но он не очень как-то мне понравился.
Или если не Canvas, то как-то отсекать SVG.
Или css clip-path?
тут пример.
https://codepen.io/mk3mk/pen/qBErqBW?editors=1100 
Простой
