Каким образом сделать подобный эффект подчеркивания?

Question

[Алекс]

На странице есть блок на котором фотка группы человек стоящих по отдельности (фоток несколько на самом деле и люди на каждой из них в разных позах). Необходимо чтобы при наведении на человека появлялась полоса ниже него.
Наведение по контуру, насколько понимаю без svg не обойтись, ну и впринципе мне предоставили svg в которых где то polygon где то path.
Решил что сделаю контейнер с относительным позиционированием, внутри вставлю svg и div который будет линией. При наведении на объект div будет получать top и left. Но не могу сообразить как мне координаты нижнего левого угла у объекта на который навели получить.

Ссылочка на jsfiddle

Примерное расположение линий при наведении на объект

Answer 1

[Владимир Сартаков]

https://jsfiddle.net/3gvd2w5z/55/
- полная реализация

Comments

[Алекс]

идеально, низкий Вам поклон. осталось с адаптивностью разобраться.

Answer 2

[Павел]

https://jsfiddle.net/enfernal/3gvd2w5z/33/

Comments

[Алекс]

нужно подчеркивать не все svg, а только объект на который навели. вы здесь разделили все и подчеркивание у вас на всю ширину, а нужно только часть.

[Павел]

Алекс, Я не вижу ничего сложного, поправил...

[Павел]

Алекс, ну или добавляйте div этот при наведении и удаляйте при убирании jquery
Можно также погуглить в сторону плагина jQuery SVG

[Алекс]

Павел, или я конкретно туплю или я вам не могу объяснить какова задача. мне не нужно подчеркивать svg в целом, мне необходимо подчеркивать объект на svg на некотором отдалении ниже него. тоесть они не на одном уровне будут допустим. Пускай для примера будут 3 кляксы одна в левом нижнем углу, вторая посередине сверху и третья снизу справа, вот мне их нужно будет подчеркнуть при наведении на каждую. можно ли узнать координаты как то что бы отрисовать линии ниже них. (Добавил рисунок как должно быть в основное описание)

[Павел]

Алекс, https://codepen.io/miguelra/pen/NAjNYA
https://jsfiddle.net/zuul/k7a3q5xm/
Также проще цвет менять path, а не добавлять бордер:

path{
    fill:black;
    stroke:black;
    pointer-events:all;
}
path:hover{
    fill:red;
    stroke:red;		
}

[Алекс]

Павел, да все это классно и у меня вприниципе было реализовано подобно последнему. Но заказчик такой человек что хочет именно подчеркивание под элементом. Вот я и пытаюсь добиться ответа можно ли это подчеркивание сделать без дополнительного элемента в svg или же нужно его отрисовать на каждый объект на нужном уровне и подсвечивать в зависимости на то что навели? в ваших ответах не вижу ответа на вопрос, можно ли узнать координаты что бы это подчеркивание позиционировать абсолютно в контейнере, у Вас же вся работа идет именно с элементами которые отрисованы, а у меня есть path, и есть div это разные сущности