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 .