javascript - examples - svg tutorial español

Repintado de SVG

Question

Estoy trabajando en dibujar una grilla SVG usando Javascript. Logré dibujar el eje, así como las etiquetas de mi 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. Cuando uso Firebug, he podido confirmar que los elementos del círculo que representan mis puntos se han agregado al SVG DOM con los atributos correctos establecidos para la ubicación, el trazo del pincel, etc.

Lamentablemente, la imagen real tal como la representa 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 de SVG luego como se muestra en la extensió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 total de SVG!

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