2

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.

2

3 Answers 3

2

Creating a complete 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.

2

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

2
  • In the dabbles example you can see that this produces a new path each time you click on the Run button. But you can do this: var path = s.path("M 100 200 C 200......"); and set this as object for the textpath attribute. Then you can reuse the path for further text operations. It seems that the path attribute does not have to be a string when using the attr function.
    – robsch
    Feb 7, 2014 at 10:16
  • Thanks Robert, that looks like it may be a problem with my testing environment, where Snap isn't clearing that when I do a clear(). I'll see if I can fix that. I'm guessing that shouldn't happen on a normal page that someone will use live. Thanks for highlighting it.
    – Ian
    Feb 7, 2014 at 10:38
1

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.net/Wetw4/5/ Its not ideal, but may give some ideas.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.