Javascript innerHTML未写入svg组Firefox和IE

我正在做一个项目，遇到了一个路障。在Chrome中，它按预期工作，但在Firefox和IE中不起作用。下面的代码实际上只是真实项目代码的一个非常简化的版本。基本上，我试图替换svg每组中的圆圈。因此，我从预编码的圆开始，然后删除innerHTML并将其设置为具有新位置和半径的新圆。有必要删除现有的圆圈，因为在最终版本中，我希望完全替换内容。我意识到innerHTML将替换内容，但我在循环中运行它，因此在清除它之后，我最终需要+=到圆圈的末尾

我知道可能不是一个好的解释

要求是它用id=“whateverIWant”清除组的子级，因为有多个组，然后重新定义子级。组中可以有多个子圈，每次迭代或刷新时，可能会有不同数量的子圈作为最后一次

很多尝试和错误让我达到了这一点，但可能有更好的方法来清除这些孩子并重新创造他们。请记住，新孩子的属性可能会发生变化，在制作过程中，我可能会处理数百个这样的孩子。我还将子对象的集合作为字符串存储在数组中，然后再添加它们以用于其他处理

<svg viewBox="0 0 640 480" height="480" width="640" style="background-color:white" version="1.1">
    <g id="redC" stroke="none" fill="red" fill-opacity="0.1">
        <circle cx="100" cy="450" r="50" />
        <circle cx="100" cy="50" r="50" />
    </g>
    <g id="greenC" stroke="none" fill="green" fill-opacity="0.1">
        <circle cx="150" cy="350" r="50" />
    </g>
    <g id="blueC" stroke="none" fill="blue" fill-opacity="0.1">
        <circle cx="100" cy="350" r="50" />
    </g>
</svg>

---

$（文档）.ready（函数（）{
document.getElementById（“redC”）.innerHTML=“”；
对于（var i=1；iSVG元素上的
innerHTML
属性还没有广泛的浏览器支持。同时，您可以通过dom操纵方法创建元素。它们与常规HTML元素具有不同的命名空间，因此要创建它们，您不能只使用，
document.createElement（“圆圈”）
。相反，您还必须传递名称空间：

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

在我的SVG项目中，为了方便创建SVG元素，我扩展了jQuery：

var svgns = "http://www.w3.org/2000/svg";
$.svg = function $svg(tagName) {
    return $(document.createElementNS(svgns, tagName));
};

$(document).ready(function () {
    $("#redC").empty();
    for (var i = 1; i < 5; i++) {
        var num = (i * 10).toString();
        $.svg("circle").attr({
            cx: 300,
            cy: 50,
            r: num
        }).appendTo("#redC");
    }
});

然后，您可以使用jQuery方法操作SVG元素：

var svgns = "http://www.w3.org/2000/svg";
$.svg = function $svg(tagName) {
    return $(document.createElementNS(svgns, tagName));
};

$(document).ready(function () {
    $("#redC").empty();
    for (var i = 1; i < 5; i++) {
        var num = (i * 10).toString();
        $.svg("circle").attr({
            cx: 300,
            cy: 50,
            r: num
        }).appendTo("#redC");
    }
});

$（文档）.ready（函数（）{
$（“#redC”）.empty（）；
对于（变量i=1；i<5；i++）{
var num=（i*10）.toString（）；
$.svg（“圆”）.attr({
cx:300，
塞：50，
r:num
}).附于（“#redC”）；
}
});

演示：
这里有一个小把戏。我已经将您的语法转换为jQuery。非常感谢大家的帮助。好的，我明白了，它现在变得更有意义了。感谢说明：
innerHTML
现在实际上在svg元素上受支持，请参阅DOM解析和序列化规范。@ErikDahlström-谢谢，这是一个好信息。我更新了我的答案，以重新命名体现这一变化。到目前为止，似乎只有Chrome和Opera实现了它。IE11报告说，
innerHTML
不存在。当我在FireFox中更改
innerHTML
时，属性值会发生变化，但从视觉上看，它似乎具有从元素中删除所有内容的效果，就像我设置了
innerHTML=“”
。没错，Firefox在写入
innerHTML
时似乎有一些错误，但读取似乎可以正常工作：。另请参阅（有关写入
innerHTML
）。