Как реализовать верстку линий в иерархичном дереве?

Добрый день. Мне надо реализовать иерархичное дерево.

Блоки должны друг с другом соединяться линией. Я понимаю, как реализовать за счет абсолютного позиционирования линию, но все крошится, когда мне нужно динамически между блоками добавить элемент.

Смотри рисунок:
5ffb1682557d1637726175.png

Как автоматически привязать концы линии к середине блока, вне зависимости от того, где он находиться?

Я как понимаю, на Canvas можно решить данную систему, но тут знаний не так много, так как в блоках может быть много контента и он долен быть динамическим.

Может кто-то подскажет решение или готовые плагины по отрисовке иерархичных деревьев?
  • Вопрос задан
  • 428 просмотров
Пригласить эксперта
Ответы на вопрос 2
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Тут ВСЁ!
Ответ написан
Комментировать
HamSter007
@HamSter007
HTML/CSS верстальщик
Такой простейший пример: jsbin.

Смысл в том, чтобы соединять блоки с помощью svg path (или line можно использовать).
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы