Pontos desenhados no evento onload do elemento SVG não estão sendo exibidos quando renderizado

Question

Eu estou trabalhando em desenho de uma grade de SVG usando JavaScript. Eu consegui obter o eixo desenhado, bem como minhas etiquetas quadrante. No entanto eu correr em um problema ao adicionar meus pontos dinâmicos.

Eu estou tentando desenhar os pontos no evento onload do elemento SVG. Ao usar Firebug eu tenho sido capaz de confirmar que os elementos do círculo representando os meus pontos são adicionados ao SVG DOM com os atributos corretos definidos para localização, pincelada, etc.

Infelizmente a imagem real como prestado por meu navegador (Firefox 3) não atualiza para refletir o fato de que eu adicionei esses novos elementos DOM!

A seguir está o código que eu uso para adicionar os elementos para o nó DOM correto:

function drawPoints()
  {
    var points = pointCollection.points;
    var grid = SVGDoc.getElementById("gridGroup");

    for(var i = 0 in points)
    {
        var x = points[i].x;
        var y = points[i].y;
        var label = points[i].event;

        //<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

        var dot = SVGDoc.createElement("circle");
        dot.setAttribute("cx", x);
        dot.setAttribute("cy", y);
        dot.setAttribute("r", 15);
        dot.setAttribute("stroke", "red");
        dot.setAttribute("stroke-width", "2");
        dot.setAttribute("fill", "black");

        grid.appendChild(dot);
    }
  }

A estrutura SVG depois como mostrado pela depuração extensão Firebug para o Firefox é:

<svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg" onload="init(evt); drawAxis(); drawPoints()">
  <g id="gridGroup" stroke="green">
    <line id="xAxis" x1="0" x2="800" y1="400" y2="400" stroke-width="2"/>
    <line id="yAxis" x1="400" x2="400" y1="0" y2="800" stroke-width="2"/>
    <text id="importantLabel" x="155" y="20" font-family="Verdana" font-size="18" fill="blue" onclick="drawPoints()">Important</text>
    <text id="notImportantLabel" x="555" y="20" font-family="Verdana" font-size="18" fill="blue">Not-Important</text>
    <text id="urgentLabel" x="20" y="200" font-family="Verdana" font-size="18" fill="blue" transform="rotate(-90, 20, 200)">Urgent</text>
    <text id="notUrgentLabel" x="20" y="600" font-family="Verdana" font-size="18" fill="blue" transform="rotate(-90, 20, 600)">Not-Urgent</text>

    <circle cx="30" cy="30" r="15" stroke="red" stroke-width="2" fill="black"/>
    <circle cx="600" cy="600" r="15" stroke="red" stroke-width="2" fill="black"/>
    <circle cx="400" cy="400" r="15" stroke="red" stroke-width="2" fill="black"/>
  </g>
</svg>

Qualquer ajuda seria muito apreciada, eu sou um novato total SVG!

Answer 1

Para criar dinamicamente elementos SVG que você tem que usar o método createElementNS com o namespace apropriado, por exemplo.

var dot = SVGDoc.createElementNS("http://www.w3.org/2000/svg", "circle");

Para obter mais informações, veja as tutoriais por Kevin Lindsay e, especialmente, aqui .