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

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

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

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

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

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

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

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

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

Похожие вопросы
21 нояб. 2024, в 19:09
5000 руб./за проект
21 нояб. 2024, в 17:47
7000 руб./за проект
21 нояб. 2024, в 17:30
1500 руб./за проект