Geek Answers Handbook

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

I want to add text to the center of the path and align it horizontally, DO NOT align along the path.

I have the following text that follows a path in the center, but I want to display it so that it is horizontal, regardless of which corner lights up.

<text text-anchor="middle">
    <textPath xlink:href="#SomePath" startOffset="50%">Some Text</textPath>
</text>
+5
source share
2 answers

If I understand correctly that after each separate letter you should be direct (that is, indicate the North), and follow the path. Something like that:

Example

If you look at the current SVG standard , this is not possible.

- , , 90 .

SVG, ( - ), () , rotate:

  <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>
+2

script:

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

More articles:


All Articles