31

我有以下 svg 对象，如果我直接放入 html 页面而不使用代码（静态），它会正确呈现。

但是如果我使用 JavaScript 将相同的 svg 内容插入到我的 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);
4

1 回答 1

51

元素boardElement应该像这样声明

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

于 2013-07-08T06:57:32.200 回答