渲染时不显示SVG元素的onload事件中绘制的点 [英] Points drawn in the onload event of the SVG element are NOT being displayed when rendered

问题描述

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

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.

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

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.

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

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!

以下是代码I用于将元素添加到正确的DOM节点：

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

之后的SVG结构，如Firebug调试扩展所示对于Firefox是：

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.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新手！

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

推荐答案

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

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.org/2000/svg", "circle");

有关详细信息，请参阅 Kevin Lindsay的教程，特别是这里。

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

这篇关于渲染时不显示SVG元素的onload事件中绘制的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！