添加textpath成功后 text的宽高全部坍缩为0 请问大佬们，这个怎么解决

源自：5-5 SVG-使用脚本控制路径文本

添加textpath成功后 text的宽高全部坍缩为0 请问大佬们，这个怎么解决

<!DOCTYPE html>

<html>

<head>

<title>textPath</title>

</head>

<body>

<form>

</select>

</form>

Text path scripting <tspan id="tspan">动态使用路径文本</tspan>

</text>

</svg>

// 命名空间

var SVG_NS = "http://:wwww.w3.org/2000/svg";

var XLINK_NS= "http://:wwww.w3.org/1999/xlink";

var select = document.getElementById('text-path-select');

var text = document.getElementById('text');

var tspan = document.getElementById('tspan');

function addTextPath() {

var textPath = document.createElementNS(SVG_NS,'textPath');

while(text.firstChild){

textPath.appendChild(text.firstChild);

}

text.appendChild(textPath);

}

function setTextPath(path) {

var textPath = text.firstChild;

textPath.setAttributeNS(XLINK_NS,'xlink:href',path);

var pathElment = document.querySelector(path);

tspan.setAttribute('fill',pathElment.getAttribute('stroke'));

}

function removeTextPath() {

var textPath = text.firstChild;

while(textPath.firstChild){

text.appendChild(textPath.firstChild);

}

text.removeChild(textPath);

tspan.removeAttribute('fill');

}

select.addEventListener("input",function () {

var value = select.value;

if (text.firstChild.tagName && text.firstChild.tagName.toLowerCase() == 'textpath') {

if (value == 'none') removeTextPath();

else setTextPath(value);

}else{

if (value != 'none') {

addTextPath();

setTextPath(value);

}

});

</script>

</body>

</html>

提问者：HakuPretty 2018-05-27 14:02

添加textpath成功后 text的宽高全部坍缩为0 请问大佬们，这个怎么解决

个回答