Рисование линий на JS без canvas

[grego]

Добрый день!

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

Итак, предусловия - имеется див, который выполняет роль холста. На холсте изображены районы карты (тоже дивы), для которых выполнено абсолютное позиционирование по координатам для того, чтобы имитировать реальное расположение на карте.
Сейчас стоит задача привести это все в подобие графа - т. е. дорисовать линии между районами-соседями.

Проблема заключается в том, что судя по инфе, которую я нагуглил, отрисовка линий без использования canvas довольно сложна в реализации, в обратную же сторону - т. е. если использовать канвас, то мне наверняка придется переделывать холст и возможно механизм позиционирования/создания регионов.

Собственно получается 2 вопроса:
1. С учетом того, что у меня имеется div-холст и множество вложенных div-элементов, которые спозиционированы абсолютно, можно ли и как сделать реализацию линий между ними?
2. С учетом информации из вопроса 1 в случае, когда отрисовка на canvas менее трудозатратна, можно ли и что придется изменить в текущей реализации с использованием canvas?

Заранее благодарю за ответы!

[danik.js]

Как насчет SVG?

[grego]

Как насчет SVG?

Посмотрел, в принципе подходит. Единственное, я нашел крайне мало информации о построении svg через javascript. Может быть подскажете какие-нибудь источники?

[maguaguru]

Я где то подглядел такой код:

var SVG = {

        self:this,
	        //нужные пространства имен
        svgns: 'http://www.w3.org/2000/svg',
	    xlink: 'http://www.w3.org/1999/xlink',

	        //создание svg элемента
	        createElement: function(name, attrs){
                var element = document.createElementNS(SVG.svgns, name);

	            if(attrs) {
	                SVG.setAttr(element, attrs);
	            }
	            return element;
	        },

	        //установка атрибутов
	        setAttr: function(element, attrs) {
	            for(var i in attrs) {
	                if(i === 'href') { //путь к изображению приписывается в атрибуте xlink:href
	                    element.setAttributeNS(SVG.xlink, i, attrs[i]);
	                } else { //обычный атрибут
	                    element.setAttribute(i, attrs[i]);
	                }
	            }
	            return element;
	        }



	    }

Вывел его в отдельный файл и создаю с помошью него SVG элементы:

wa  =  SVG.createElement("svg",{"width":"460",
                                    "height":"460"});

          target.appendChild(wa);
 wa_rect = SVG.createElement("rect",{"x":0,"y":0,"width":_w,"height":_h,"style":"fill:"+_color});
        wa.appendChild(wa_rect);

target - ссылка на div-контекйнер
Мне так удобно. А какие свойства, и какие элементы, можешь тут глянуть:
http://www.w3schools.com/Svg/svg_examples.asp