SVG，當我動態創建Text時，Text不會在textPath上呈現

Question

我想動態創建一個textPath，所以我寫了這個：

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');
    }

我在頁面上有一個SVG元素“面板”。 問題是 - 它不起作用

用html文件編寫的相同代碼可以正常工作。

你可以看到我在這里談論的例子

（按“測試”按鈕創建與頂部相同的svg（除了ids =）））

Answer 1

您不能使用setAttribute在非null命名空間中創建屬性，但這正是您在創建xlink：href屬性時嘗試執行的操作。

必須通過setAttributeNS ie創建xlink：href屬性

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