javascript - Points drawn in the onload event of the SVG element are NOT being displayed when rendered - Stack Overflow

admin管理员组

文章数量:1401484

I'm working on drawing an SVG grid using Javascript. I've managed to get the axis drawn, as well as my quadrant labels. However I've run into an issue adding my dynamic points.

I'm trying to draw the points in the onload event of the SVG element. When using Firebug I have been able to confirm that the circle elements representing my points ARE added to the SVG DOM with the correct attributes set for location, brush stroke, etc.

Unfortunately the actual image as rendered by my browser (Firefox 3) does not update to reflect the fact that I have added these new DOM elements!

The following is the code I use to add the elements to the correct DOM node:

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

The SVG structure afterwards as shown by the Firebug debugging extension for Firefox is:

<svg width="800" height="800" version="1.1" xmlns="" 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>

Any help would be greatly appreciated, I am a total SVG newbie!

I'm working on drawing an SVG grid using Javascript. I've managed to get the axis drawn, as well as my quadrant labels. However I've run into an issue adding my dynamic points.

I'm trying to draw the points in the onload event of the SVG element. When using Firebug I have been able to confirm that the circle elements representing my points ARE added to the SVG DOM with the correct attributes set for location, brush stroke, etc.

Unfortunately the actual image as rendered by my browser (Firefox 3) does not update to reflect the fact that I have added these new DOM elements!

The following is the code I use to add the elements to the correct DOM node:

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

The SVG structure afterwards as shown by the Firebug debugging extension for Firefox is:

<svg width="800" height="800" version="1.1" xmlns="http://www.w3/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>

Any help would be greatly appreciated, I am a total SVG newbie!

• javascript
• svg
• repaint

Share Improve this question Follow edited Mar 5, 2018 at 21:19 slayernoah 4,4921212 gold badges4444 silver badges7676 bronze badges asked Nov 4, 2008 at 23:41 DanielDaniel

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

In order to dynamically create SVG elements you have to use the createElementNS method with the appropriate namespace, e.g.

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

For more info, see the tutorials by Kevin Lindsay and especially here.

本文标签：