Los puntos dibujados en el evento de carga del elemento SVG NO se muestran cuando se representan

Question

Estoy trabajando en dibujar una cuadrícula SVG usando Javascript. Me las arreglé para dibujar el eje, así como mis etiquetas de cuadrante. Sin embargo, me he encontrado con un problema al agregar mis puntos dinámicos.

Estoy tratando de dibujar los puntos en el evento de carga del elemento SVG. Al usar Firebug, he podido confirmar que los elementos del círculo que representan mis puntos SE AÑADEN al DOM SVG con los atributos correctos establecidos para ubicación, trazo de pincel, etc.

¡Lamentablemente, la imagen real que muestra mi navegador (Firefox 3) no se actualiza para reflejar el hecho de que he agregado estos nuevos elementos DOM!

El siguiente es el código que uso para agregar los elementos al nodo DOM correcto:

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

La estructura SVG posterior como se muestra en la extensión de depuración de Firebug para Firefox es:

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

Cualquier ayuda sería muy apreciada, ¡soy un novato SVG total!

Answer 1

Para crear dinámicamente elementos SVG, debe usar el método createElementNS con el espacio de nombres apropiado, por ejemplo

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

Para obtener más información, consulte los tutoriales de Kevin Lindsay y especialmente aquí .