How to place text in the center of an svg path

Question

For rendering SVG I'm using jQuery SVG plugin. And, now I want to add text to each path and polygon. On jsFiddle you can see generated markup by plugin.

For creating text I wrote the following code:

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

In the code on jsFiddle you can see that the textpath tag exists, but it's not visible. How to add text to the center of each path?
Thanks.

Louden

What do you mean with "center of each path"? Do you mean you want the text in the middle of the shape, or do you want the text centered on the path itself but still following the path (centered around 50% of the total path length)? – Huelva

I want the text in the middle of the shape. – Louden

Ok, then please update/clarify your question above. – Huelva

Answer 1

To place text in a straight line on top of a shape, in the middle of the boundingbox see:

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

It just adds some javascript to place text.

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

The above only looks at path elements, but you could tweak the selector to include whatever you need.

Catamaran

Seems like the jsfiddle example isn't working anymore. – Reyreyes

Any way to avoid this: "Uncaught TypeError: p.getBBox is not a function" using Chrome, "SCRIPT438: SCRIPT438: Object doesn't support property or method 'getBBox'" , in Microsoft-Edge , and "TypeError: p.getBBox is not a function" when using Firefox ? – Keeney

@Keeney Doesn't happen in any of these browsers on my machine, have you tried running with all browser extensions disabled? – Huelva

@ErikDahlström getBBox is available sorry, I tried to call getBBox on a list of elements ... – Keeney

Answer 2

There are a couple of issues here.

a) SVG is case sensitive so it's textPath and not textpath.

b) textPath has to be enclosed in a <text> element to be valid

Here's your jsFiddle fixed up.

Cantle

textpath works fine also. But, Jquery SVG not add <text> element and xlink. Also, I want locate text in center. – Louden

xlink is optional. startOffset="50" text-anchor="middle" will centre it. I've updated the jsFiddle with startOffset and text-anchor attributes. – Cantle

Ah, yep. Just tried -- it works on Firefox but doesn't render at all on Chrome. – Frequent

@Frequent Raise a bug on Chrome's bugtracker then: code.google.com/p/chromium/issues/list – Cantle

Given that you have height="" in your svg tag, Chrome's behavior is more of what I would expect than Firefox's. – Frequent

Well done for noticing but... The viewBox should be used for its the aspect ratio and the invalid height replaced by width (which I managed to set correctly) * aspect ratio which would result in the exact height I forgot to set being applied. Hence setting height as I've now done does nothing. Feel free to check whether it fixes Chrome, if it does it's still a Chrome bug. – Cantle