Точки, нарисованные в событии onload элемента SVG, НЕ отображаются при рендеринге

Я работаю над рисованием сетки SVG с использованием Javascript. Мне удалось нарисовать ось, а также метки квадрантов. Однако я столкнулся с проблемой при добавлении моих динамических точек.

Я пытаюсь нарисовать точки в событии onload элемента SVG. При использовании 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;

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

После этого структура SVG, показанная расширением отладки Firebug для Firefox, выглядит следующим образом:

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

Любая помощь будет принята с благодарностью, я новичок в SVG!