渲染时不显示SVG元素的onload事件中绘制的点

我正在使用Javascript绘制SVG网格.我已设法绘制轴,以及我的象限标签.但是我遇到了一个添加动态点的问题.

我正在尝试在SVG元素的onload事件中绘制点.使用Firebug时,我已经能够确认代表我的点的圆形元素被添加到SVG DOM中,并为位置,画笔描边等设置了正确的属性.

不幸的是,我的浏览器(Firefox 3)渲染的实际图像没有更新,以反映我添加了这些新DOM元素的事实!

以下是我用于将元素添加到正确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;

        //

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

之后的Firefox的Firebug调试扩展所示的SVG结构是:

任何帮助将不胜感激,我是一个完整的SVG新手!

为了动态创建SVG元素,您必须使用createElementNS具有适当命名空间的方法,例如

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

有关更多信息,请参阅Kevin Lindsay的教程,特别是此处.