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项目中，为了方便创建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/

innerHTML没有写入svg组Firefox和IE

1 个答案: