Не отображается созданный элемент
 

Всем привет:) Вопрос такой. В html-файл вставлена svg-разметка (шаблон чертежа), и надо на лету там кое что рисовать. Упрощенно выглядит примерно так:

var svg = document.getElementsByTagName('svg')[0];
for (var j=0; j<points.length; j++){
    var line = document.createElement('polyline');
    line.setAttribute('stroke','red'); 
    line.setAttribute('stroke-width','2');
    line.setAttribute('points',points[j]);
    line.setAttribute('fill','none');    
    svg.appendChild(line);
}

И никакие линии не отображаются. Если посмотреть код элемента, они есть. В консоли Firebug'а они почему-то бледного цвета по сравнению с другими элементами. Хотелось бы делать через innerHTML, типа:

for (var j=0; j<points.length; j++){
	svg.innerHTML += '<polyline points="'+points[j]+'" fill="none" stroke="red" stroke-width="2" /> ;
}

Но так вообще все исчезает вместе с шаблоном.
Буду рада любой подсказке:)

Потому что нужно создавать элемент в пространстве SVG:
document.createElementNS('http://www.w3.org/2000/svg', 'polyline')

Ура! спасибо большое, danik.js:) А с innerHTML ты случайно не знаешь как быть?)

svg.innerHTML += '<polyline xmlns="http://www.w3.org/2000/svg" points="'+points[j]+'" fill="none" stroke="red" stroke-width="2" />'

не прокатило

наверно нужн что то типа: svg.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'polyline'))