I punti disegnati nell'evento onload dell'elemento SVG NON ??vengono visualizzati durante il rendering

Question

Sto lavorando al disegno di una griglia SVG usando Javascript. Sono riuscito a disegnare l'asse, così come le etichette dei miei quadranti. Tuttavia ho riscontrato un problema con l'aggiunta dei miei punti dinamici.

Sto cercando di disegnare i punti nell'evento onload dell'elemento SVG. Quando ho usato Firebug sono stato in grado di confermare che gli elementi del cerchio che rappresentano i miei punti SONO aggiunti al DOM SVG con gli attributi corretti impostati per posizione, tratto pennello, ecc.

Sfortunatamente l'immagine reale visualizzata dal mio browser (Firefox 3) non si aggiorna per riflettere il fatto che ho aggiunto questi nuovi elementi DOM!

Di seguito è riportato il codice che utilizzo per aggiungere gli elementi al nodo DOM corretto:

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 struttura SVG in seguito, come mostrato dall'estensione di debug di Firebug per 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>

Qualsiasi aiuto sarebbe molto apprezzato, sono un principiante SVG totale!

Answer 1

Per creare dinamicamente elementi SVG devi usare il metodo createElementNS con lo spazio dei nomi appropriato, ad es.

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

Per ulteriori informazioni, consultare i tutorial di Kevin Lindsay e in particolare qui .