Cómo colocar texto en el centro de una ruta svg

Para renderizar SVG Estoy usando el plugin jQuery SVG. Y, ahora quiero agregar texto a cada ruta y polígono. En jsFiddle puede ver el marcado generado por el complemento.Cómo colocar texto en el centro de una ruta svg

para crear texto que escribió el siguiente código:

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'));

En el código de jsFiddle se puede ver que existe la etiqueta textpath, pero no es visible. ¿Cómo agregar texto en el centro de cada ruta?
Gracias.

Fuente

2012-06-12 user1260827

¿Qué quiere decir con "centro de cada camino"? ¿Quiere decir que quiere el texto en el medio de la forma, o desea que el texto se centre en la ruta en sí pero siga la ruta (centrada alrededor del 50% de la longitud total de la ruta)? –

Quiero el texto en el medio de la forma. – user1260827

Ok, por favor actualice/aclare su pregunta anterior. –

para colocar texto en una línea recta en la parte superior de una forma, en medio de la BoundingBox véase:

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

que sólo añade algo de JavaScript para colocar texto.

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]) 
}

Lo anterior sólo se basa en elementos de ruta, pero se puede ajustar el selector para incluir todo lo que necesita.

Fuente

2012-06-13 10:32:12

Parece que el ejemplo jsfiddle ya no funciona. –

Debería funcionar ahora. –

Impresionante ¡Gracias! –

Hay un par de problemas aquí.

a) SVG distingue entre mayúsculas y minúsculas, por lo que es textPath y no textpath.

b) textPath tiene que ser encerrado en un elemento <text> ser válida

Aquí está tu jsFiddle fixed up.

Fuente

2012-06-12 09:38:54

'textpath' funciona bien también. Pero, Jquery SVG no agrega el elemento '' y 'xlink'. Además, quiero ubicar el texto en el centro. – user1260827

xlink es opcional. startOffset = "50" text-anchor = "middle" lo centrará. He actualizado el jsFiddle con los atributos startOffset y text-anchor. –

El violín no funciona :-( – foobarbecue

Cómo colocar texto en el centro de una ruta svg

Respuesta

Cuestiones relacionadas