Làm cách nào để Chrome vẽ lại SVG nội dung được thêm động?

Question

Tôi đã thêm động các phần tử vòng tròn vào svg được hiển thị trong iFrame. Chrome không hiển thị các yếu tố mới, chưa thử FF. Tôi có cần phải gọi lại/làm mới lại không? Vòng tròn đầu tiên thực sự là trong tài liệu svg, phần còn lại đến từ tập lệnh.

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

Các javascript mà tạo ra các yếu tố:

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

tôi đã không cố gắng gì bạn đang làm, nơi bạn về cơ bản có hai nguồn nhưng tôi biết Chrome không cần làm mới/vẽ lại khi tự động thêm nội dung.

Đây là mã của tôi có thể điều này sẽ giúp bạn.

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

đâu nền chỉ là id của một nhóm (g tag)

Answer 2

Tôi đoán, nhưng có bạn đã cố gắng createElementNS("http://www.w3.org/2000/svg","circle") thay vì createElement("circle")?