Используя SVG, возможно ли добавить текст в центр пути и выровнять его по горизонтали?

Question

Я хочу добавить текст в центр пути и выровнять его по горизонтали, НЕ выровнять по пути.

У меня следующий текст, идущий по траектории в центре, но я хочу отобразить его так, чтобы он был горизонтальным, независимо от того, под каким углом движется маршрут.

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

Answer 1

Если я правильно понимаю, вы после каждой отдельной буквы должны быть прямыми (т.е. указывать на север), но следовать по пути. Примерно так:

Глядя на текущий стандарт SVG , это кажется невозможным.

Для горизонтальных текстовых потоков справочная ориентация для данного глиф является вектором, который начинается в точка пересечения на пути к который символ прикреплен и который указывает в направлении 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>

Answer 2

Вы можете легко рассчитать необходимые корректировки в ротации в скрипте:

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