Punkte gezeichnet im onload-Ereignisse des SVG-Elements nicht angezeigt werden, wenn gerendert

Question

Ich arbeite ein SVG Raster mit Javascript auf die Zeichnung. Ich habe es geschafft, die Achse gezogen zu bekommen, sowie meine Quadranten Etiketten. Ich habe jedoch laufen in ein Problem das Hinzufügen meines dynamischen Punkte.

Ich versuche, die Punkte in dem onload-Ereignisse des SVG Elements zu ziehen. Wenn Firebug ich in der Lage gewesen, um zu bestätigen, dass die Kreiselemente meine Punkte darstellen, werden hinzugefügt, um den SVG DOM mit den richtigen Attributen gesetzt für die Lage, Pinselstrich, etc.

Leider ist das aktuelle Bild wie von meinem Browser (Firefox 3) wiedergegeben wird nicht aktualisiert, um die Tatsache widerzuspiegeln, dass ich diese neuen DOM-Elemente hinzugefügt haben!

Im Folgenden ist der Code, den ich verwenden Sie die Elemente an den richtigen DOM-Knoten hinzuzufügen:

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

Die SVG Struktur danach, wie durch die Firebug Debug-Erweiterung für Firefox gezeigt ist:

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

Jede Hilfe wäre sehr dankbar, ich bin ein absoluter Neuling SVG!

Answer 1

Um dynamisch SVG-Elemente zu erstellen Sie haben die createElementNS Methode mit dem entsprechenden Namespace verwenden, z.

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

siehe

Für mehr Informationen, den Tutorials von Kevin Lindsay und insbesondere hier .