javascript – innerHTML没有写入svg组Firefox和IE

我正在研究一个项目并遇到了障碍.在Chrome中,它可以按预期工作,但不能在Firefox和IE中使用.下面的代码实际上只是真实项目代码的一个非常简化的版本.基本上我正在尝试替换每组svg中的圆圈.所以我从预编码的圆开始,然后删除并将inner HTML设置为具有新位置和半径的新圆.有必要删除现有的圈子,因为在最终版本中我将要完全替换内容.我意识到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>

$(document).ready(function(){
    document.getElementById("redC").innerHTML = "";
    for(var i=1;i<5;i++){
        var num = (i*10).toString();
        document.getElementById("redC").innerHTML += "<circle cx='300' cy='50' r="+num+" />";
    }
});

任何建议都非常感谢.

解决方法

SVG元素上的innerHTML属性还没有广泛的浏览器支持.在此期间,您可以通过dom操作方法创建元素.它们具有与常规HTML元素不同的命名空间,因此要创建它们,您不能只使用document.createElement(“circle”).相反,您还必须传递命名空间：

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

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

$(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");
    }
});

演示：http://jsfiddle.net/FfdaL/