Question

我遇到了SVG文本元素的问题。我想找到SVG文本的中心点。在HTML文件中：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="300" y="300" style="font-size: 80px;" id="test">It is example text</text>
 </svg>

在Javascript中，我有类似的东西：

var obj = document.getElementById('test').childNodes[1];
var box = obj.getBBox();

var centerPoint = new Object();
centerPoint.x = box.x + box.width / 2;
centerPoint.y = box.y + box.height/ 2;

但它不起作用 - 中心点低于我的预期。可能我错过了一些东西，我确定还有一个文字属性我必须从＆＃34; centerPoint.y＆＃34;中减去。＆＃34; centerPoint.x＆＃34;价值似乎没问题。它已经在IE9浏览器，Chrome，Opera和Firefox上进行了检查。结果是一样的。

或者您可能有其他解决方案吗？

修改

总结我的代码是否正常工作。我重写了整个代码，现在好了。我不知道发生了什么，可能我的浏览器根本没有刷新脚本。将行高设置为＆＃34; 0＆＃34;没必要。 getBBox这就是我需要做的所有事情。

无论如何，谢谢你的时间，对不起我的英语！：）

Answer 1

线高可能是一个原因。文本通常位于比其中心/

稍高的位置

Answer 2

在Chrome中，naturalHeight和naturalWidth似乎正确地获得了高度和宽度。尝试一下，看看它们是否适合你？

var centrePoint = {
    x: obj.naturalWidth / 2,
    y: obj.naturalHeight / 2
}

根据我对SVG元素的体验，是的，他们有时会像行高一样在它们周围填充奇怪的位，因此设置line-height:0可以提供帮助。

此外，getBBox()返回的对象实际上不是像素。它与包含viewbox元素的SVG相关 - 不一定是像素。我网站上的SVG可能有{500}乘500 viewbox，但尺寸仅为25像素×25像素。所以它可能与像素有很大的不同。

Answer 3

如果您正在寻找更严格的边界框，那么您可以迭代文本元素中的字符添加制作您自己的更紧密的边界框，请参阅getExtentOfChar DOM方法。但请注意，如果您有大量文字，这可能会很昂贵。

Answer 4

并非所有字形都是相同的高度。考虑一下＆＃34; hay＆＃34; h高于a，y低于h和a（y具有称为下降的东西）。当您在SVG中获得文本的边界框时，它会为您提供字形单元格大小。这通常足以容纳上升，即h和下降，即y字符。这就是SVG规范所说的方式，这就是为什么所有浏览器的工作原理都是一样的。

Answer 5

您可以使用getBoundingClientRect()代替getBBox()

var obj = document.getElementById('test').childNodes[1];
var box = obj.getBoundingClientRect();
var centerPointX = box.left + box.width / 2;
var centerPointY = box.top + box.height/ 2;

HTML5 - 如何获取SVG文本元素的中心点？

5 个答案: