如何将文字放置在SVG路径的中心

Question

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

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

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

在jsFiddle上的代码中，您可以看到存在textpath标签，但它是不可见的。 如何将文本添加到每个路径的中心?
谢谢。

- user1260827

---

“每条路径的中心”是什么意思？您是想让文本位于形状的中间，还是想让文本居中于路径本身，但仍然遵循路径（围绕总路径长度的50%居中）？ - Erik Dahlström

我想要在形状的中间放置文本。 - user1260827

好的，请更新/澄清您上面的问题。 - Erik Dahlström

Answer 1

要将文本放在形状的顶部直线上，位于边界框的中间，请参见：

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

它只是添加了一些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])
}

以上只涉及路径元素，但您可以调整选择器以包括您需要的任何内容。

- Erik Dahlström

---

似乎 jsfiddle 的示例不再起作用了。 - Tyler Morrow

有没有什么方法可以避免在Chrome中出现"Uncaught TypeError: p.getBBox is not a function"，在Microsoft Edge中出现"SCRIPT438: SCRIPT438: Object doesn't support property or method 'getBBox'"，以及在Firefox中使用时出现"TypeError: p.getBBox is not a function"的错误？ - user1767316

@user1767316 在我的电脑上任何一个浏览器中都没有发生这种情况，您是否尝试禁用所有浏览器扩展程序运行？ - Erik Dahlström

@ErikDahlström getBBox是可用的，抱歉，我试图在元素列表上调用getBBox... - user1767316

Answer 2

这里有几个问题。

a) SVG区分大小写，所以应该是textPath而不是textpath。

b) textPath必须被包含在<text>元素中才能有效。

这是您的jsFiddle修复版。

- Robert Longson

---

textpath 运行良好。但是，Jquery SVG 没有添加 <text> 元素和 xlink。此外，我想将文本定位于中心。 - user1260827

xlink是可选的。startOffset="50" text-anchor="middle"将使其居中。我已经更新了jsFiddle，加入了startOffset和text-anchor属性。 - Robert Longson

啊，是的。我刚试了一下——在Firefox上可以工作，但在Chrome上根本不渲染。 - foobarbecue

@foobarbecue 在 Chrome 的 bug 追踪器上提出一个 bug：https://code.google.com/p/chromium/issues/list - Robert Longson

考虑到你的 SVG 标签中有 height=""，Chrome 的行为更符合我的预期，而不是 Firefox。 - foobarbecue

做得好，注意到了…… viewBox 应该用于其宽高比，并用宽度替换无效的高度（我已成功设置），乘以宽高比就可以得到我忘记设置的确切高度。因此，像我现在所做的那样设置高度没有任何作用。如果需要，请随意检查是否修复了 Chrome 的 bug。 - Robert Longson