innerHTML not writing into an svg group Firefox and IE

Question

I am working on a project and ran into a road block. In Chrome it works as intended but not in Firefox and IE. The code below is really just a very simplified version of the real project code. Basically I'm trying to replace the circles in each group of the svg. So I start with precoded circles and then remove and set innerHTML to a new circle with new location and radius. It is necessary to remove the existing circles as in the final version I will want to completely replace the contents. I realize innerHTML will replace the contents but I am running this in a loop and so I'd ultimately need to += to the end of the circles after clearing it out.

I know probably not a good explanation...

Requirements are that it clears the children of group with id="whateverIWant" as there is more than one group, then redefines the children. There can be more than one child circle in the group, and each iteration, or refresh, there could be a different number of children circles as the last time.

A lot of trial and error got me to this point, but there are probably better methods to clear the children and re create them. Keep in mind the attributes of the new children can change and that in production I may be handling hundreds of these children. I'm also storing a collection of the children as strings in an array before adding them for purposes of other processing.

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

Any advice is much appreciated.

Answer 1

The innerHTML property on SVG elements does not yet have wide browser support. In the meantime, you can create the elements via dom manipulation methods. They have a different namespace than regular HTML elements, so to create them, you can't just use, document.createElement("circle"). Instead, you have to pass the namespace as well:

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

In my SVG projects, I extend jQuery for convenience in creating SVG elements:

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

You can then use jQuery methods to manipulate your SVG elements:

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

Demo: http://jsfiddle.net/FfdaL/