SVG textPath align text properly along the path

Question

I want to align text along my SVG path, but, it seems, SVG doesn't want to align it above the line with the proper rotation of all letters:

How can I align text above the curve, so it will be readable, not like in the picture above?

I use Snap.SVG library to make SVG manipulations, my code looks like the following:

var path = snapelement.path("M 540,0 S 150, 460, 150, 540")
           .attr({fill : "transparent", stroke : "#000", strokeWidth : 4})

var note = snapelement.text(0, 0, "EXAMPLE TEXT")
           .attr({"textpath" : path, "font-family" : "Helvetica Neue", "font-size" : 14});

Any suggestions, even pure SVG solutions, are appreciated.

Answer 1

Just reverse the direction that your path is drawn. If you do that, the text will be on the other side of the line.

In this case, you are using an 'S' path command with no previous path segment, so working out the reverse path is a little tricky. Here is the reverse of your sample path:

var path = snapelement.path("M 150,540 C 150,540, 150,460, 540,0")