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

Question

Я работаю над рисованием сетки 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!

Answer 1

Для динамического создания SVG-элементов вы должны использовать метод createElementNS с соответствующим пространством имен, например,

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

Для получения дополнительной информации см. Учебники Кевина Линдси и особенно здесь .