如何让Chrome重绘SVG动态添加内容？ [英] How to make Chrome redraw SVG dynamically added content?

问题描述

我已经将圈元素添加到iFrame中显示的svg中。 Chrome没有显示新元素，尚未尝试FF。我需要调用一些重绘/刷新吗？第一个圆圈实际上在svg文档中，其余部分来自脚本。

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>

创建元素的javascript：

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

推荐答案

我还没有尝试过什么你正在做的事情你基本上有两个来源，但我知道Chrome在动态添加内容时不需要刷新/重绘。

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

背景只是一个组的ID（g标签）

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

这篇关于如何让Chrome重绘SVG动态添加内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！