26

I've dynamacally added the circle elements to the svg displayed in a iFrame. Chrome isnt showing the new elements, not tried FF yet. Is there somekind of redraw/refresh I need to call? The first circle is actually in the svg document, the rest come from script.

<iframe id="svgFrame" src="xmlfile1.svg" width="300" height="300">
<svg xmlns="http://www.w3.org/2000/svg" id="SVG1" width="200" height="200">
   <circle cx="20" cy="20" r="5"/>
   <circle cx="165" cy="80" r="32"/>
   <circle cx="15" cy="38" r="32"/>
   <circle cx="140" cy="39" r="30"/>
   <circle cx="178" cy="32" r="22"/>
   ...etc
   <circle cx="166" cy="130" r="16"/>
</svg>
</iframe>

The javascript which creates the elements:

function RandomNumber(min, max) {
    var r;
    r = Math.floor(Math.random() * (max - min + 1)) + min;
    return r;
}

var svg = document.getElementById("svgFrame").contentDocument;

for (var i = 0; i < 99; i++) {

    var n = svg.createElement("circle");
    n.setAttribute("cx" , RandomNumber( 0 , 200) );
    n.setAttribute("cy" , RandomNumber(0, 200) );
    n.setAttribute("r"  , RandomNumber(5, 35) );

    svg.documentElement.appendChild(n);
}

2 Answers 2

22

I haven't tried what you are doing where you essentially have two sources but I do know Chrome doesn't need a refresh/redraw when dynamically adding content.

Here is my code maybe this will help you.

xmlns = "http://www.w3.org/2000/svg";
var C = document.createElementNS(xmlns,"circle");
C.setAttributeNS(null, "cx", cx);
C.setAttributeNS(null, "cy", cy);
C.setAttributeNS(null, "r", rad);
document.getElementById("background").appendChild(C);

Where background is just the id of a group (g tag)

9
  • I've added it to the question.
    – Mesh
    Mar 30, 2010 at 12:43
  • Why do you use ".contentDocument" ? Mar 30, 2010 at 13:21
  • only used .contentDocument because is was the first prop i found that had a createElement method - have since seen there is a getSVGDocument method... is that the more correct one to use?
    – Mesh
    Mar 30, 2010 at 13:33
  • 1
    Using the NS version seem to have fixed it - again i'm puzzled, i assumed that they were children of SVG they would have the same namespaces....
    – Mesh
    Mar 30, 2010 at 13:40
  • 1
    Note that the xmlns is necessary, but the setAttributeNS(null,...) is not. You can use setAttribute(key, value) instead.
    – Abednego
    Jun 17, 2015 at 17:05
18

I'm guessing, but have you tried createElementNS("http://www.w3.org/2000/svg","circle") instead of createElement("circle")?

6
  • I'll try it, but querying the document with Inspect Element, seem to show the correct namespace. After all createElement is called from an object with the correct namespace...
    – Mesh
    Mar 30, 2010 at 13:07
  • Have just tried it and it know works - must have read the inspector wrong when i comes to the namespaces.....
    – Mesh
    Mar 30, 2010 at 13:35
  • Also after just looking at the DOM in the Inpector, i'd have thought that adding the elements as children of svg they would have the same namespace as svg...
    – Mesh
    Mar 30, 2010 at 13:38
  • From a quick read of DOM2 Core, it doesn't look like that to me, but I'm not 100% sure. Worth a try, I would have thought. Mar 30, 2010 at 13:50
  • I'm not convinced the Chrome DOM inspector is exactly correct, especially w.r.t. namespaces. I don't have any example offhand, but I seem to recall having issue with that before.
    – Ken
    Mar 30, 2010 at 15:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.