动态呈现的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不显示

回答

相关问题