Using SVG, is it possible to add text to the centre of path and align horizontally?

Question

Hi, as the question states, I want to add text to the centre of a path and align it horizontally, NOT align along the path.

I have the following text running along the path at the centre, but I want to flip it so that it is horizontal, no matter what angle the path is heading.

<text text-anchor="middle">
    <textPath xlink:href="#SomePath" startOffset="50%">Some Text</textPath>
</text>

Thanks.

Answer 1

If I understand correctly you are after each individual letter being straight (i.e. pointing North) but following the path. Something like this:

Looking at the current SVG standard this does not seem to be possible.

For horizontal text layout flows, the reference orientation for a given glyph is the vector that starts at the intersection point on the path to which the glyph is attached and which points in the direction 90 degrees counter-clockwise from the angle of the curve at the intersection point.

The image above is generated from SVG but this was achieved (as you can see from the imperfections) by applying individual kerning (rotation) to each letter by applying the rotate attribute:

  <text id="text2897">
    <textPath xlink:href="#path2890" id="textPath3304">
      <tspan
        rotate="69.238731 53.737518 40.30315 24.801943 358.96658 358.96658 4.1336575 357.93317 351.73267 351.73267 351.73267 348.63242 343.46533 343.46533 346.56558 347.599 347.599 347.599 347.599 347.599 347.599 346.56558 345.53217 344.49875 343.46533"
        id="tspan2899">
        Some sample text for path
      </tspan>
    </textPath>
  </text>

Answer 2

You can calculate the necessary adjustments in rotation in script quite easily:

var tp = document.getElementById("textpath");
var rotate = "";
for(var i = 0; i < tp.getNumberOfChars(); i++)
{
  rotate += -tp.getRotationOfChar(i) + " ";
}
tp.setAttribute("rotate", rotate);