Is there a way to use textpath using SnapSVG? I tried using textPath as an attribute but it does not seem to add a textpath element in the text node.

var txtpth = s.path("M70 70 Q 80 90 200 150 L 200 400").attr({
    fill: "none",
    stroke: "black"
 });
var crooked = s.text(0,0,"lorempsum ipsum lorempsum ipsum lorempsum ipsum lorempsum   ipsum").attr({
     textPath: txtpth,
     stroke:"black"
 });

I do not see a direct API to manipulate text paths in SVG using snap.svg.

Is there a way to use textpath using SnapSVG? I tried using textPath as an attribute but it does not seem to add a textpath element in the text node.

var txtpth = s.path("M70 70 Q 80 90 200 150 L 200 400").attr({
    fill: "none",
    stroke: "black"
 });
var crooked = s.text(0,0,"lorempsum ipsum lorempsum ipsum lorempsum ipsum lorempsum   ipsum").attr({
     textPath: txtpth,
     stroke:"black"
 });

I do not see a direct API to manipulate text paths in SVG using snap.svg.

• javascript
• text
• svg
• path
• snap.svg

Share Improve this question Follow edited Jan 23, 2014 at 22:52 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Jan 1, 2014 at 0:10 Mr. DoomsbusterMr. Doomsbuster 1,3841313 silver badges1111 bronze badges 2

• possible duplicate of Attach text on path in Raphaël? – Robert Longson Commented Jan 1, 2014 at 9:39
• I am aware of the Raphael library and the API provided by these two frameworks are different. Its not a duplicate. – Mr. Doomsbuster Commented Jan 2, 2014 at 19:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Creating a plete SVG xml with defs,path and textpath created a duplicate DEFS tag in an existing Snap document. I did something like below to evade that issue. Overall, the your solution seems to work.

var txt = s.text(50,50,"").attr({
    stroke: "black",
    fill:"none",
    fontFamily: "Helvetica Nueue, Helvetica, sans-serif",
    fontWeight: "bold"
});
var myFrag = Snap.parse('<path id="MyPath" d="M 50 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100"/>');
var txtpath = Snap.parse('<textPath id="myTextPath" xlink:href="#MyPath">We go up, then we go down, then up again</textPath>');
var defns = s.select('defs');
defns.append(myFrag);
txt.append(txtpath);
console.log("Definitions: -->" + defns.toString());

console.log("Text Element: -->" + txt.toString());

OUTPUT:

Definitions: --><defs><radialGradient cx="145" cy="331" r="38"><stop offset="0%" stop-color="#ffffff"/><stop offset="50%" stop-color="#4b4b7b"/><stop offset="100%" stop-color="#444444"/></radialGradient><rect width="10" height="10" class="svg---mgr"/><path id="MyPath" d="M 50 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100"/></defs>

Text Element: --><text x="50" y="50" stroke="#000000" fill="none" style="font-family: 'Helvetica Nueue', Helvetica, sans-serif; font-weight: bold;"><textPath id="myTextPath" xlink:href="#MyPath">We go up, then we go down, then up again</textPath></text>

However, I am not sure if this is a very elegant way to do it. I think there should be an API provided to achieve this. Preferably like taking in a textPath string, that internally does the same thing we did above.

This option is now working in the latest dev version (0.2 onwards). So you can now do this type of thing....(this won't work on 0.1)

var s = Snap("#svgout"); 

var path = "M 100 200 C 200 100 300   0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100";

var text = s.text(50,50,'Hi there')
              .attr({ 'textpath': path })
              .textPath.animate({ 'startOffset': 2000 }, 5000 );

http://svg.dabbles.info/snaptut-textpath.html

Not sure if this is a bad way or not, but a workaround (as I couldn't figure it within Snap itself only), could be to parse in the SVG and use it..so something like this...

s = Snap(800, 800);

var myPath = "M70 70 Q 80 90 200 150 L 200 400";
var myText = "lorempsum ipsum lorempsum ipsum lorempsum ipsum lorempsum   ipsum";

var myFrag = Snap.parse('<defs><path id="MyPath" d="' + myPath + '" /> </defs> \
   <text font-family="Verdana" font-size="42.5"> \
     <textPath id="myTextPath" xlink:href="#MyPath">' + myText + '</textPath> \
   </text>\
 ');

s.append( myFrag );
var tp = s.select("#myTextPath");
tp.animate({ 'startOffset': 2000 }, 5000 );

jsfiddle here http://jsfiddle/Wetw4/5/ Its not ideal, but may give some ideas.