Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

text

svg

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 display 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>
like image 327
gjrwebber Avatar asked Nov 05 '22 18:11

gjrwebber


1 Answers

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

Example

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>
like image 159
mfloryan Avatar answered Nov 22 '22 14:11

mfloryan