Les points dessinés dans l'événement onload de l'élément SVG ne sont PAS affichés lors du rendu

Question

Je travaille sur le dessin d'une grille SVG en utilisant Javascript. J'ai réussi à obtenir l'axe dessiné, ainsi que mes étiquettes de quadrant. Cependant, j'ai rencontré un problème en ajoutant mes points dynamiques.

J'essaie de dessiner les points dans l'événement onload de l'élément SVG. En utilisant Firebug, j'ai pu confirmer que les éléments du cercle représentant mes points sont ajoutés au DOM SVG avec les attributs corrects pour l'emplacement, le coup de pinceau, etc.

Malheureusement l'image actuelle est rendue par mon navigateur (Firefox 3) ne met pas à jour pour refléter le fait que j'ai ajouté ces nouveaux éléments DOM!

Voici le code que j'utilise pour ajouter les éléments au nœud DOM correct:

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 structure SVG après comme le montre l'extension de débogage Firebug pour Firefox est:

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

Toute aide serait grandement appréciée, je suis un débutant SVG total!

Answer 1

Pour créer dynamiquement des éléments SVG, vous devez utiliser la méthode createElementNS avec l'espace de nom approprié, par ex.

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

Pour plus d'informations, voir le tutorials by Kevin Lindsay et surtout here.