js 动态创建SVG defs标签中path无效

Question

我的代码：

<div id="svg-div">
                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    id="svg" width="600px" height="400px" viewBox="0 0 600 400">
                    
                </svg>
</div>

$('#svg').append(createSvg('defs', '', {}));
            $('defs').append(createSvg('path', 'test', { 'd': "M110 100 a50 50 0 1 1 100 0" }))

            $('#svg').append(createSvg('text', this.id, {
                'text-anchor': "middle",
                'font-size': "12",
                'style': "fill:red;"
            }));


            $('#{0}'.format(this.id)).append(createSvg('textPath', '{0}'.format(this.id + 'textPath'), {
                'xlink:href': "#test",
                'startOffset': "50%"
            }))

            $('#{0}'.format(this.id + 'textPath')).html('测试环形文字')

function createSvg(tag, id, attrs) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);

    if (id != null && id != '') {
        el.setAttribute('id', id);
    }

    for (var k in attrs) {
        el.setAttribute(k, attrs[k]);
    }

    return el;
}

目前设置path在defs包裹下动态添加数据无法显示的问题。

还请各位大佬解惑

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 请看👉 ：记录鼠标轨迹, 生成svg的path, 用纯js实现

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 以帮助更多的人 ^-^