7

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.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
user1260827
  • 1,498
  • 6
  • 31
  • 53

2 Answers2

16

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.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • Seems like the jsfiddle example isn't working anymore. – Tyler Morrow Apr 24 '15 at 02:19
  • 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 ? – user1767316 Oct 29 '18 at 19:41
  • @user1767316 Doesn't happen in any of these browsers on my machine, have you tried running with all browser extensions disabled? – Erik Dahlström Oct 31 '18 at 09:12
  • @ErikDahlström getBBox is available sorry, I tried to call getBBox on a list of elements ... – user1767316 Nov 04 '18 at 15:42
1

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.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • `textpath` works fine also. But, Jquery SVG not add `` element and `xlink`. Also, I want locate text in center. – user1260827 Jun 12 '12 at 11:28
  • xlink is optional. startOffset="50" text-anchor="middle" will centre it. I've updated the jsFiddle with startOffset and text-anchor attributes. – Robert Longson Jun 12 '12 at 12:50
  • Ah, yep. Just tried -- it works on Firefox but doesn't render at all on Chrome. – foobarbecue Jun 03 '15 at 05:22
  • @foobarbecue Raise a bug on Chrome's bugtracker then: https://code.google.com/p/chromium/issues/list – Robert Longson Jun 03 '15 at 06:48
  • Given that you have `height=""` in your svg tag, Chrome's behavior is more of what I would expect than Firefox's. – foobarbecue Jun 03 '15 at 13:32
  • 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. – Robert Longson Jun 03 '15 at 14:13