Jquery 如何将文本放置在svg路径的中心

对于呈现SVG，我使用jQuerySVG插件。现在，我想向每个路径和多边形添加文本。在上，您可以看到按插件生成的标记

为了创建文本，我编写了以下代码：

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

在上的代码中，您可以看到

textpath

标记存在，但不可见。 如何将文本添加到每个路径的中心？

---

谢谢。

这里有几个问题

a） SVG区分大小写，所以它是textPath而不是textPath

b） textPath必须包含在

元素中才能有效

---

这是你的.< /P> < P>把文字放在一个直线上的一个形状上，在边界框的中间看：

它只是添加了一些javascript来放置文本

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

---

上述内容只查看路径元素，但您可以调整选择器以包含所需的任何内容。

textpath

也可以正常工作。但是，jquerysvg没有添加

元素和

xlink

。另外，我想在中心定位文本。xlink是可选的。startOffset=“50”text anchor=“middle”将使其居中。我已经用startOffset和文本锚属性更新了JSFIDLE。啊，是的。刚刚尝试过——它在Firefox上工作，但在Chrome上根本不渲染。@Foobrabby在Chrome的bugtracker上提出了一个错误：鉴于svg标签中有

height=“

，Chrome的行为比Firefox的更符合我的预期。你说“每条路径的中心”是什么意思？你的意思是你想要文本在中间的形状，或者你想要文本以路径本身为中心，但仍然遵循路径（以总路径长度的50%为中心）？我想要文本在中间的形状。然后请更新/澄清您上面的问题。JSFIDLE示例似乎不再有效。有没有办法避免这种情况：“未捕获的TypeError:p.getBBox不是一个函数”使用Chrome，“SCRIPT438:SCRIPT438:Object不支持属性或方法“getBBox”，在Microsoft Edge中，“TypeError:p.getBBox不是一个函数”使用Firefox时？@user1767316在我机器上的任何浏览器中都不会出现，您是否尝试在禁用所有浏览器扩展的情况下运行？@ErikDahlström getBBox可用抱歉，我尝试在元素列表中调用getBBox。。。