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 avec Javascript. J'ai réussi à dessiner l'axe, 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. Lors de l’utilisation de Firebug, j’ai pu confirmer que les éléments de cercle représentant mes points étaient ajoutés au DOM SVG avec les attributs corrects définis pour l’emplacement, le coup de pinceau, etc.

Malheureusement, l'image actuelle telle que rendue par mon navigateur (Firefox 3) ne se 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 bon nœud DOM:

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 suivante, illustrée par l'extension de débogage Firebug pour Firefox, est la suivante:

<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 en SVG!

Answer 1

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

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

Pour plus d'informations, consultez les didacticiels de Kevin Lindsay et plus particulièrement ici .