Adding more svg elements to my document at runtime

Question

I have an html file, I'm adding am element to it dynamically, then a rectangle. Works well in the different browsers (ignoring IE). When I try to use the same method to dynamically create an element, it does not work in Chrome or Safari, only in Opera. Is my syntax wrong, or does webkit probably just not support adding elements at runtime? (the same element works fine if I declare it as tags up-front instead). Maybe I'm not supposed to use appendChild() with these types of nodes? Here's what I have, you should be able to dump it into an html file and run it. If anyone has any idea if there's a way around this, it'd be great:

<html>
<head>
  <script>

    window.onload = function() {
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
        svg.setAttribute('version', '1.1');
        svg.setAttribute('width', '800px');
        svg.setAttribute('height', '400px');
        document.body.appendChild(svg);

        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        rect.setAttribute("id", "myrect"); 
        rect.setAttribute("fill","red");
        rect.setAttribute("stroke","black");
        rect.setAttribute("stroke-width","5");
        rect.setAttribute("x", "100");
        rect.setAttribute("y", "100");
        rect.setAttribute("width", "100");
        rect.setAttribute("height", "50");
        svg.appendChild(rect);

        var anim = document.createElementNS('http://www.w3.org/2000/svg','animate');
        anim.setAttribute("attributeName", "width");
        anim.setAttribute("from", "100");
        anim.setAttribute("to", "400");
        anim.setAttribute("dur", "10s");
        anim.setAttribute("begin", "0s");
        anim.setAttribute("fill", "freeze");
        rect.appendChild(anim);
    }

</script>
</head>

<body>
</body>

score 4 · Answer 1 · edited Apr 04 '16 at 20:08

4

You really should use setAttributeNS(null, ...) when using namespace calls like document.createElementNS().

From xmlgraphics.apache.org/batik/faq.html

However, it is important to know that some implementations make a difference between setAttribute(x, y) and setAttributeNS(null, x, y), so it is good practice to use setAttributeNS which is the only guaranteed interoperable way of setting attributes in a namespace aware DOM implementation.

edited Apr 04 '16 at 20:08

1.21 gigawatts

16,517
32
123
231

answered Jan 28 '10 at 16:57

Kyle Butt

9,340
3
22
15

Kyle, what is the effect of setAttributeNS(null, ...) vs setAttribute()? I'm not sure what it does to the DOM, thanks. – user246114 Jan 28 '10 at 17:22
1

From: http://xmlgraphics.apache.org/batik/faq.html, "However, it is important to know that some implementations make a difference between setAttribute(x, y) and setAttributeNS(null, x, y), so it is good practice to use setAttributeNS which is the only guaranteed interoperable way of setting attributes in a namespace aware DOM implementation. " – Kyle Butt Jan 28 '10 at 18:03

score 0 · Answer 2 · answered Jan 28 '10 at 17:36

0

Ughh this looks like a bug in webkit. You have to call node.beginElement() to get the animation to start, but in webkit it doesn't work, appears in the bug tracker.

Blast.

answered Jan 28 '10 at 17:36

user246114

50,223
42
112
149

1

Please, do you have a link to the exact bug in the WebKit bug tracker? It would help me a lot. Thanks. – tillda Feb 22 '11 at 09:55
@tillda maybe this will help http://stackoverflow.com/questions/8520493/svg-elements-will-not-animate-when-added-dynamically – Green Aug 14 '12 at 03:17

Adding more svg elements to my document at runtime

2 Answers2

Linked