動態呈現的SVG不顯示

我有以下svg對象，如果我直接在html頁面中放入，而不使用代碼（靜態），它會正確呈現。動態呈現的SVG不顯示

但是，如果我使用JavaScript插入到我的html頁面，則不會顯示相同的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>

我加入SVG動態地使用下面的代碼的問題，在此容器是我的DIV這是有根據的身體

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

     viewPort.setAttribute('height', 100); 

     viewPort.setAttribute('width', 100); 

     container.innerHTML = ''; 

     container.appendChild(viewPort);

這個我添加矩形內後這使用

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

來源

2013-07-08 Royal Pinto

你是如何創建的SVG，你如何將其插入到文檔？ – Sirko

就像Sirko說的那樣，直接告訴我們問題出在哪裏會幫助我們:)也許向我們展示生成該svg的javscript部分？ – Lkrups

我編輯了代碼並添加了關於如何動態添加svg的代碼。 –

元素boardElement應聲明李柯所以

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

來源

2013-07-08 06:57:32 Lkrups

這解決了我的問題，但我不明白爲什麼它是這樣的。因爲這兩個時間呈現的HTML代碼是相同的（源html）。 –

我讀過這個問題，它解釋了爲什麼:) http://stackoverflow.com/questions/8173217/createelement-vs-createelementns。快樂編碼 – Lkrups

好的，明白了謝謝 –

動態呈現的SVG不顯示

回答

相關問題