Utilizzando SVG, è possibile aggiungere del testo al centro di un tracciato e allinearlo orizzontalmente?

Question

Desidero aggiungere del testo al centro di un tracciato e allinearlo orizzontalmente, NON allineare lungo il percorso.

Ho il seguente testo che corre lungo il percorso al centro, ma voglio visualizzarlo in modo che sia orizzontale, indipendentemente dall'angolazione del percorso.

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

Answer 1

Se ho capito bene, ci sono dopo ogni singola lettera che è diritta (cioè punta Nord) ma seguendo il percorso. Qualcosa di simile a questo:

Guardando l'attuale SVG standard questo non sembra essere possibile.

Per flussi layout del testo orizzontale, l'orientamento riferimento per un dato glifo è il vettore che inizia nel punto di intersezione sulla via cui il glifo è collegato e che punti nella direzione 90 gradi in senso antiorario dall'angolo di la curva al punto di intersezione.

L'immagine sopra è generato da SVG, ma questo è stato raggiunto (come si può vedere dalle imperfezioni) applicando la crenatura individuale (rotazione) per ogni lettera applicando l'attributo di rotazione:

<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

È in grado di calcolare gli adeguamenti necessari a rotazione in script abbastanza facilmente:

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