SVG, Text does not render on textPath when I create it dynamically

Question

I want to create a textPath dynamically, so I wrote this:

function makeSVG(tag, attrs) {
        var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
        for (var k in attrs)
            el.setAttribute(k, attrs[k]);
        return el;
    }

    function appendSVG(item, tag, attrs) {
        var el = document.getElementById(item);
        el.appendChild(makeSVG(tag, attrs));
    }

    function TEST() {
        appendSVG('pannel', 'path', {'id':'PID', 'd': 'M 0 0 L 100 100', 'stroke': '#000000' })
        appendSVG('pannel', 'text', { 'id': 'TID', 'x': '5', 'fill': '#000000' })
        appendSVG('TID', 'textPath', { 'xlink:href': '#PID', 'id':'TPath' })
        $('#TPath').append('TEXT');
    }

I have an SVG element "panel" on the page. The problem is - it doesnt work

The same code written in an html file works correctly.

You can see the example of what I'm talking here

(Pressing the "test" button creates the same svg as on the top (except ids =) ))

Answer 1

You cannot use setAttribute to create an attribute in a non-null namespace but that's precisely what you are trying to do when creating the xlink:href attribute.

The xlink:href attribute must be created via setAttributeNS ie

el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', attrs[k]);