SVG，当我动态创建它时，文本在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');
    }

我在页面上有一个名为“panel”的SVG元素。

问题是-它无法正常工作。

在HTML文件中编写的相同代码可以正常工作。

您可以在此处看到我所说的示例

（按下“测试”按钮将创建与顶部相同的SVG（除了ids =））

- qpIlIpp

Answer 1

当创建xlink:href属性时，您不能使用setAttribute在非空命名空间中创建属性。

xlink:href属性必须通过setAttributeNS创建，即：

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

- Robert Longson