Question

我想生成一个简单的textPath。我认为这将花费我5分钟，但现在已经有几个小时了，我已经倾倒了堆栈溢出并谷歌发现我的实现看起来正确。我不确定丢失了什么。我可以将TextNode附加到文本容器，但是只要我将textPath放在它上面就不会在SVG元素中呈现。

<!DOCTYPE html="">
<html>  
<meta name="description" content="">
<head>
<script language="Javascript">


function drawTextPath(evt){

var mypath2 = document.createElementNS("http://www.w3.org/2000/svg","path"); 

mypath2.setAttributeNS(null, "id", "#path");    
mypath2.setAttributeNS(null, "d","M400 50 l200 0");
mypath2.setAttributeNS(null,"fill", "none");
mypath2.setAttributeNS(null,"stroke","red");
document.getElementById("bodySVG").appendChild(mypath2);





var text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
text1.setAttributeNS(null, "fill", "blue");
text1.setAttributeNS(null,"font-size","30px");
text1.setAttributeNS(null,"x", "0");
text1.setAttributeNS(null,"y", "70");


var textpath = document.createElementNS("http://www.w3.org/2000/svg","textPath");
  textpath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#path");   
  var ringdatenode = document.createTextNode("This is the text");
  textpath.appendChild(ringdatenode);
  text1.appendChild(textpath);
  document.getElementById("bodySVG").appendChild(text1);

}

</script>
</head>

<body>

<p>Welcome </p>

<svg id="bodySVG" height="800" width="1500" xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">



<circle id="todayring" cx="100" cy="20" r="18" stroke="black" stroke-width="5"    fill="orange" onclick="drawTextPath(evt);"></circle>

</svg>
</body>
</html>

Answer 1

你非常接近。 id应该是path而不是#path。

mypath2.setAttributeNS(null, "id", "path");

你将其称为#path。

SVG文本路径通过JavaScript不绘图

1 个答案: