添加textpath成功后 text的寬高全部坍縮為0 請(qǐng)問(wèn)大佬們，這個(gè)怎么解決
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>textPath</title>
</head>
<body>
<label>Path:</label>
<form>
<select id="text-path-select">
<option value="none">none</option>
<option value="#path1">path1</option>
<option value="#path2">path2</option>
<option value="#path3">path3</option>
</select>
</form>
<svg width="800" height="600"? xmlns="http://:wwww.w3.org/2000/svg">
<path id="path1" d="M 100? 200 Q 200 100? 300 200 T 500 200" stroke="rgb(0,255,0)" fill="none"></path>
<path id="path2" d="M100,300l100-50,200,100,100,-50 " stroke="rgb(255,0,0)" fill="none"></path>
<path id="path3" d="M100,400A400,300,0,0,0,500,400 " stroke="blue" fill="none"></path>
<text id="text" x="100" y="100" stroke="" fill="" font-size="20px" font-family="Microsoft YaHei">
Text path scripting <tspan id="tspan">動(dòng)態(tài)使用路徑文本</tspan>
</text>
</svg>
<script type="text/javascript">
// 命名空間
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>
2018-10-22
老哥。。你的坍縮這個(gè)詞用的很是玄妙，你出現(xiàn)這種問(wèn)題的原因其實(shí)很明顯...
你的namespace鏈接寫(xiě)錯(cuò)了，應(yīng)該是'