Come rendere Chrome ridisegnare SVG contenuto aggiunto dinamicamente?

Question

Ho aggiunto dinamicamente gli elementi del cerchio allo svg visualizzato in un iFrame. Chrome non mostra ancora i nuovi elementi, non ha ancora provato FF. C'è qualche tipo di aggiornamento/aggiornamento che devo chiamare? Il primo cerchio è in realtà nel documento svg, il resto proviene dallo 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> 

Il javascript che crea gli elementi:

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

Answer 1

non ho provato quello che stai facendo, dove si hanno essenzialmente due fonti ma so Chrome non ha bisogno di un aggiornamento/ridisegnare quando aggiungere in modo dinamico il contenuto.

Ecco il mio codice forse questo ti aiuterà.

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

Dove fondo è solo l'id di un gruppo (g tag)

Answer 2

sto cercando di indovinare, ma hai provato createElementNS("http://www.w3.org/2000/svg","circle") invece di createElement("circle")?