SVG được hiển thị động không hiển thị

Question

Tôi có đối tượng svg sau đây nếu tôi đặt trực tiếp vào trang html mà không cần sử dụng mã (tĩnh) nó sẽ hiển thị chính xác.

nhưng cùng một nội dung svg nếu tôi chèn vào trang html của mình bằng JavaScript không hiển thị và nếu tôi mở nó trong firebug và kiểm tra svg và cố gắng chỉnh sửa thẻ svg, nó sẽ hiển thị.

gì có thể là vấn đề

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

Tôi thêm svg động sử dụng dưới mã, ở đây chứa sẽ div của tôi mà là có dưới cơ thể

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

     viewPort.setAttribute('height', 100); 

     viewPort.setAttribute('width', 100); 

     container.innerHTML = ''; 

     container.appendChild(viewPort); 

Sau này tôi thêm rect bên trong điều này sử dụng

  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

Phần tử boardElement phải được khai báo li ke so

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