通过javascript的SVG文本路径未绘制

Question

我想生成一个简单的textPath。 我以为这要花我5分钟，但现在已经过了几个小时，我已经遍历了堆栈溢出和Google，发现我的实现看起来不错。 我不确定缺少什么。 我可以将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。

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

完成后，您将其称为#path。

通过javascript的SVG文本路径未绘制

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-08-11 06:24:01

通过javascript的SVG文本路径未绘制

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-08-11 06:24:01

解决方案1
0 已采纳 2014-08-11 06:24:01