Как заставить Chrome перерисовать SVG динамически добавленный контент?
Я динамически добавил элементы окружности к svg, отображаемому в iFrame. Chrome не показывает новые элементы, еще не пробовал FF. Нужно ли кому-нибудь перерисовать/обновить мне позвонить? Первый круг фактически находится в документе svg, остальные - от 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>
javascript, который создает элементы:
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);
}
Ответы
Ответ 1
Я не пробовал, что вы делаете, когда у вас по существу есть два источника, но я знаю, что Chrome не нуждается в обновлении/перерисовке при динамическом добавлении контента.
Вот мой код, возможно, это поможет вам.
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);
Где фон - это только идентификатор группы (g tag)
Ответ 2
Я предполагаю, но вы пробовали createElementNS("http://www.w3.org/2000/svg","circle")
вместо createElement("circle")
?