I have a script that adds elements to an inline SVG image via jQuery, but the new elements don't seem to be showing up. The output is perfectly valid; I can copy it into the original file, reload it, and it will render just fine. But when the script generates it, the new elements aren't visible.

Here is a snippet that replicates the problem:

Thanks in advance!

I have a script that adds elements to an inline SVG image via jQuery, but the new elements don't seem to be showing up. The output is perfectly valid; I can copy it into the original file, reload it, and it will render just fine. But when the script generates it, the new elements aren't visible.

Here is a snippet that replicates the problem: http://tinkerbin./7OmDWlsz

Thanks in advance!

• javascript
• jquery
• svg

Share Improve this question Follow edited Jul 3, 2012 at 9:14 SpacedMonkey 2,78311 gold badge1717 silver badges1717 bronze badges asked Jul 3, 2012 at 2:44 user1318416user1318416 75911 gold badge66 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You will not see any svg output if the elements are not in the svg namespace.

Try replacing your script snippet with this:

var slices = 10;

for(i = 0; i < 360; i += 360 / slices) {
  var element = document.createElementNS("http://www.w3/2000/svg", "polyline");
  element.setAttribute("points", "0,0 -10,100 10,100");
  element.setAttribute("transform", "rotate(" + i + ")");
  $('#rotate').append(element);
}

Thank you to much @Erik Dahlström, I may add a contribution to this. Here is the function I define in order to build svg trees :

Node.prototype.svg_grow = function(node_name, node_attr) {
    n = document.createElementNS("http://www.w3/2000/svg", node_name);
    this.appendChild(n);
    if (typeof node_attr !== 'undefined') {
        for (key in node_attr) {
            n.setAttribute(key, node_attr[key]);
        }
    }
    return n;
}

So you can just use svg_grow() on any node like this :

s_g = document.getElementById("parent");
s_rect = s_g.svg_grow('rect', {x:0, y:0, width:480, height:640});

which just do :

<g id="parent">
    <rect x="0" y="0" width="480" height="640" />
</g>