我想动态创建一个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');
}
Run Code Online (Sandbox Code Playgroud)
我在页面上有一个SVG元素"面板".问题是 - 它不起作用
用html文件编写的相同代码可以正常工作.
你可以看到我在这里谈论的例子
(按"测试"按钮创建与顶部相同的svg(除了ids =)))