Usando SVG, ¿es posible agregar texto al centro de una ruta y alinearlo horizontalmente?

Question

Quiero agregar texto al centro de una ruta y alinearlo horizontalmente, NO alinear a lo largo de la ruta.

Tengo el siguiente texto corriendo a lo largo de la ruta en el centro, pero quiero mostrarlo de modo que quede horizontal, sin importar en qué ángulo se dirija la ruta.

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

Answer 1

Si entiendo correctamente, usted está después de que cada letra individual sea recta (es decir, apunte al norte) pero siga la ruta. Algo como esto:

En cuanto a la corriente SVG standard esto no parece que sea posible.

Para flujos de diseño de texto horizontal, la orientación referencia para un determinado glifo es el vector que comienza en el punto de intersección en el camino hacia que está unido el glifo y que apunta en la dirección 90 grados en sentido antihorario desde el ángulo de la curva en el punto de intersección.

La imagen de arriba se genera a partir SVG, pero esto se logró (como se puede ver en las imperfecciones) aplicando el ajuste entre caracteres individuales (rotación) para cada letra aplicando el atributo de rotación:

<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

Usted puede calcular los ajustes necesarios en la rotación en la secuencia de comandos con bastante facilidad:

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