问题
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.
回答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.
回答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.
来源:https://stackoverflow.com/questions/10992691/how-to-place-text-in-the-center-of-an-svg-path