L'SVG reso dinamicamente non viene visualizzato

Question

Ho il seguente oggetto svg che se metto nella pagina html direttamente senza usare il codice (statico) lo rende correttamente.

ma lo stesso contenuto svg se inserisco nella mia pagina html utilizzando JavaScript non viene mostrato e se lo apro in firebug e ispeziono svg e provo a modificare il tag svg, viene visualizzato.

Quale potrebbe essere il problema

<svg height="100" width="100"> 
    <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"></rect> 
</svg> 

sto aggiungendo svg dinamicamente utilizzando sottostante Codice, qui contenitore sarà il mio div che è lì sotto il corpo

 viewPort = document.createElementNS('http://www.w3.org/2000/svg','svg'); 

     viewPort.setAttribute('height', 100); 

     viewPort.setAttribute('width', 100); 

     container.innerHTML = ''; 

     container.appendChild(viewPort); 

Dopo questo, io sto aggiungendo rect all'interno utilizzando

  boardElement = document.createElement('rect'); 

      boardElement.setAttribute('width', '100'); 

      boardElement.setAttribute('height', '100'); 

      boardElement.setAttribute('y', '1'); 

      boardElement.setAttribute('x', '1'); 

      boardElement.setAttribute('style', "fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"); 


viewPort.appendChild(boardElement); 

Answer 1

L'elemento boardElement deve essere dichiarato li ke così

boardElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");