Dynamisch gerenderten SVG zeigt nicht

Question

Ich habe das folgende SVG-Objekt, das, wenn ich html Seite direkt ohne Code (statisch) einfügen rendert es richtig.

aber gleiche Svg Inhalt wenn ich in meine HTML-Seite mit JavaScript einfügen es nicht zeigt und wenn ich es in Firebug öffnen und Svg überprüfen und versuchen, Svg-Tag zu bearbeiten, wird es angezeigt.

Was könnte das Problem sein

<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> 

I svg dynamisch unter Code bin hinzufügen, wird hier Container meine div sein, die unter dort Körper ist

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

     viewPort.setAttribute('height', 100); 

     viewPort.setAttribute('width', 100); 

     container.innerHTML = ''; 

     container.appendChild(viewPort); 

Danach ich Zugabe bin rect innen dies mit

  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

Das Element boardElement sollte li deklariert werden ke so

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