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

svg html5 generator

Question

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.

Para crear texto escribí 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 en jsFiddle , puede ver que la etiqueta de textpath existe, pero no está visible. ¿Cómo agregar texto al centro de cada ruta?
Gracias.

Answer 1

Para colocar texto en línea recta en la parte superior de una forma, en el medio del cuadro delimitador, vea:

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

Simplemente agrega algunos 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 solo mira los elementos de ruta, pero puede ajustar el selector para incluir lo que necesite.

Answer 2

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 debe estar encerrado en un elemento <text> para ser válido

Aquí está tu jsFiddle arreglado .