動的レンダリングされたSVGが表示されない

Question

私は、HTMLページに直接コード（静的）を使わずに置くと正しくレンダリングされます。

JavaScriptを使用してHTMLページに挿入すると、それは表示されず、Firebugで開いてsvgを調べてsvgタグを編集しようとすると、同じsvgコンテンツになります。私は内側の矩形を追加してい私は、コードの下に使用して動的にSVGを追加してい問題

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

可能性があり、ここではコンテナは、本体の下にあり、この後

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

     viewPort.setAttribute('height', 100); 

     viewPort.setAttribute('width', 100); 

     container.innerHTML = ''; 

     container.appendChild(viewPort); 

である私のdiv要素になります

これを使用する

  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

要素boardElementはli KEそう

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