Динамически отображаемый SVG не отображается

У меня есть следующий объект svg, который, если я помещаю непосредственно на html-страницу, не используя код (статический), он корректно отображает.

но тот же самый svg-контент, если я вставляю его на страницу html с помощью JavaScript, он не отображается, и если я открою его в 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);

После этого я добавляю прямоугольник внутри этого, используя

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

Ответ 1