Как на js соединить элементы линией?

Question

[abusabir]

Здравствуйте!
Дано: картинка и некоторое описание (список). Каждый элемент списка соответствует определённой области на картинке. Нужно их соединить линиями (кажется это можно назвать легендой).
Проблема в том конечно, что требуется адаптивность, чтобы линии не покидали связь со своим элементом списка.
На картинке я предполагаю можно задать абсолютные координаты для определённых точек и отрисовать их div'ами, но как дальше соединять их с элементами списка не представляю.

Answer 1

[Антон Шаманов]

Самый простой вариант, это использовать svg графику или canvas:

• Объекты на картинке помечаешь с помощью тега map, каждый из них содержит id аттрибут вида img_XXX
  
• Элементы списка получают id вида li_XXX
  
• Выводишь canvas поверх блока с изображением и списком.
  
• Вычисляешь координаты начала и конца линии (список и область на картинке) относительно блока
  
• Рисуешь линию на canvas