Menu
I want to generate a simple textPath. I thought this would take me 5 minutes but now it has been a few hours and I've poured over stack overflow and google to find that my implementation looks right. I'm not sure whats missing. I can get a TextNode to attach to a text container but as soon as I put the textPath on it will not render in the SVG element.
<!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>
513
You're pretty close. The id should be path and not #path though.
mypath2.setAttributeNS(null, "id", "path");
which you refer to as #path as you have done.
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
