Есть огромная svg карта, разбитая по регионам (регионы различной формы) с расстояниями между ними, и у каждой такой картинки внутри svg есть слой со штриховкой. Смысл в том, что необходимо, чтобы при наведении на основную область появлялась его штриховка. Это сделал без проблем - расставил классы и id к элементам и накат js-ину, с этим все хорошо.
Но косяк в том, что наведение отрабатывает и появление штриховки происходит до того, как довожу курсор до границы региона. И пересечение слоев картинок идет между собой, некоторые области просто под прозрачной областью остаются.
svg пришла из Adobe Illustrator
Структура svg вкратце:
<svg>
<image id="картинка_1"></image>
<image id="картинка_1_штрих"></image>
<image id="картинка_2"></image>
<image id="картинка_2_штрих"></image>
<image id="картинка_3"></image>`
<image id="картинка_3_штрих"></image>`
</svg>
Как можно реализовать, чтобы наведение отрабатывало на границе самого рисованного изображения, и какие предложения с положением слоев? Или есть какое то другое решение задачи?
Заранее спасибо