Come posizionare il testo al centro di un percorso svg

Question

Per il rendering SVG sto usando il plugin SVG jQuery. E, ora voglio aggiungere del testo a ogni percorso e poligono. Su jsFiddle puoi vedere il markup generato dal plugin.

Per la creazione di testo che ho scritto il seguente codice:

var svgg = $("#rsr").svg('get'); 
var texts = svgg.createText(); 
svgg.textpath($("#Layer_x0020_1"),id, texts.string('We go '). 
    span('up', { dy: -30, fill: 'red' }).span(',', { dy: 30 }). 
    string(' then we go down, then up again')); 

Nel codice su jsFiddle si può vedere che il tag textpath esiste, ma non è visibile. Come aggiungere testo al centro di ciascun percorso?
Grazie.

Answer 1

per inserire il testo in linea retta sulla cima di una forma, nel bel mezzo della Sede BoundingBox:

http://jsfiddle.net/dYuAA/114/

E 'appena aggiunge un po' di javascript per inserire il testo.

function addText(p) 
{ 
    var t = document.createElementNS("http://www.w3.org/2000/svg", "text"); 
    var b = p.getBBox(); 
    t.setAttribute("transform", "translate(" + (b.x + b.width/2) + " " + (b.y + b.height/2) + ")"); 
    t.textContent = "a"; 
    t.setAttribute("fill", "red"); 
    t.setAttribute("font-size", "14"); 
    p.parentNode.insertBefore(t, p.nextSibling); 
} 

var paths = document.querySelectorAll("path"); 
for (var p in paths) 
{ 
    addText(paths[p]) 
} 

È possibile che guarda solo a elementi di percorso, ma si potrebbe modificare il selettore per includere tutto ciò che serve.

Answer 2

Ci sono un paio di problemi qui.

a) SVG fa distinzione tra maiuscole e minuscole, quindi è textPath e non textpath.

b) textPath deve essere racchiuso in un elemento di <text> per essere valido

Ecco la tua jsFiddle fixed up.