Как сделать интерактивное выделение на изображении(см. фото)?

Question

[Samalamadoit]

Как можно сделать такое выделение? Меня интересует с помощью чего, есть какие js-библиотеки или может это можно сделать с помощью SVG, Canvas. Подскажите плз ресурсы где можно посмотреть или что-то конкретное.

https://domnewton.ru

/

Answer 1

[Арсений Матыцин]

1. Берешь редактор, загоняешь в него картинку.
2. На картинке рисуешь область.
3. Вместе с картинкой экспортируешь, как SVG (чтобы совпадала область с кратинкой).
4. Чистишь SVG, переделываешь, если надо (ссылку на картинку задаешь ресурсом сайта, а не импортированной, например).
5. На polygon вешаешь события, которые тебе нужны.
6. Встраиваешь в HTML-тело документа.

1–3 пункты нужны по сути только для того, чтобы совпали координаты. Это можно сделать и наживую прямо в коде.

Answer 2

[xmoonlight]

SVG