31

コード（静的）を使用せずにhtmlページに直接配置すると、適切にレンダリングされる次のsvgオブジェクトがあります。

しかし、JavaScriptを使用してhtmlページに挿入すると同じsvgコンテンツが表示されず、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 になります。

        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 に答える