Html. Нарисовать линию

#javascript #html

Нужно нарисовать или любым иным способом провести линию от одного блока div к другому.
Т.е. два элемента связать линией. Элементы генерируются динамически.

Строится все это дело на основе уровней. Например, есть пользователь с уровнем 1.
Он будет на самом верху. Дальше пользователи с уровнем 2, они ниже. Нужно их соединить
любым способом, как на схеме.
Схематичный пример:


    

Ответы

Ответ 1

Например так:



var first = document.getElementById('first');
var second = document.getElementById('second');
var line = document.getElementById('line').getElementsByTagName('line')[0];

function shuffle() {
    var pos = {
        ft: Math.round(Math.random() * 50),
        fl: Math.round(Math.random() * 50),
        st: Math.round(Math.random() * 100) + 100,
        sl: Math.round(Math.random() * 100) + 200
    }
    first.style.top = pos.ft + 'px';
    first.style.left = pos.fl + 'px';
    second.style.top = pos.st + 'px';
    second.style.left = pos.sl + 'px';
    line.setAttribute('x1', pos.fl + first.offsetWidth);
    line.setAttribute('y1', pos.ft + first.offsetHeight);
    line.setAttribute('x2', pos.sl);
    line.setAttribute('y2', pos.st);
}

shuffle();

document.getElementById('shuffle').addEventListener('click', shuffle);
div {
    position: absolute;
    border: 2px solid #000;
    width: 100px;
    height: 50px;
}

#line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    stroke: #F00;
    stroke-width: 2px;
    z-index: -1;
}

#shuffle { position: absolute; top: 20px; left: 50%; }








Ответ 2

Вот пример с использовнием SVG: