لا يتم عرض نقاط تعادل في الحدث onload عنصر SVG عندما تقدم

Question

وأنا أعمل على رسم لشبكة SVG باستخدام جافا سكريبت. لقد تمكنت من الحصول على محور الانتباه، فضلا عن بلدي تسميات رباعي. ومع ذلك لقد واجهت مشكلة في إضافة نقاطي الحيوية.

وأنا أحاول أن ألفت نقطة في الحدث onload عنصر SVG. عند استخدام الحرائق وقد أتيحت لي الفرصة للتأكد من أن عناصر دائرة تمثل لي نقطة تضاف إلى SVG DOM مع سمات الصحيحة تعيين للموقع، بالفرشاة، وما إلى ذلك.

ومما يؤسف له أن الصورة الفعلية، والمقدمة من قبل متصفحي (فايرفوكس 3) لا يتم تحديث لتعكس حقيقة أنني قد أضفت هذه العناصر DOM جديدة!

وفيما يلي هو رمز I استخدامها لإضافة عناصر إلى عقدة 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 بعد ذلك كما هو مبين من قبل التصحيح امتداد الحرائق لفايرفوكس هو:

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

لمزيد من المعلومات، راجع كيفن ليندساي و خصوصا <ل أ href = "http://www.kevlindev.com/tutorials/basics/shapes/js_dom/index.htm" يختلط = "noreferrer"> هنا .