innerHTML没有写入svg组Firefox和IE

Question

我正在做一个项目并遇到了一个路障.在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>

---

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

任何建议都非常感谢.

Answer 1

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

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

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

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/