我有以下svg对象,如果我直接放入html页面而不使用代码(静态),它会正确呈现。
但是相同的svg内容如果我使用JavaScript插入我的html页面它没有显示,如果我在firebug中打开它并检查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,它位于body
下面 viewPort = document.createElementNS('http://www.w3.org/2000/svg','svg');
viewPort.setAttribute('height', 100);
viewPort.setAttribute('width', 100);
container.innerHTML = '';
container.appendChild(viewPort);
在此之后我使用
在其中添加rect 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);
答案 0 :(得分:33)
元素boardElement
应该声明为
boardElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");