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

Posted 2023-03-29

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

【英文标题】：HTML5 - How to get the center point of SVG text element?

【发布时间】：2012-08-28 07:10:32

【问题描述】：

我遇到了 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;

但它不起作用 - 中心点低于我的预期。可能我错过了一些东西，我确定还有一个文本属性需要从“centerPoint.y”中减去。 “centerPoint.x”值似乎没问题。它在 IE9 浏览器、Chrome、Opera 和 Firefox 上进行了检查。结果是一样的。 或者您有其他解决方案？

编辑

总结一下我的代码可以正常工作。我重写了整个代码，现在可以了。我不知道发生了什么，可能我的浏览器根本没有刷新脚本。将 line-height 设置为“0”是不必要的。 getBBox 这就是我需要做的一切。

无论如何，感谢您的时间，对不起我的英语！ :)

【问题讨论】：

降序可能会影响整体定位。看看你能不能在盒子周围画一个矩形 - 这会告诉你更多关于正在发生的事情。

【参考方案1】：

行高可能是一个原因。文本的位置通常比它的中心高一点/

【参考方案2】：

如果您正在寻找更紧密的边界框，那么您可以遍历文本元素中的字符并添加您自己的更紧密的边界框，请参阅getExtentOfChar DOM 方法。但是请注意，如果您有很多文本，这可能会很昂贵。

【参考方案3】：

并非所有字形都具有相同的高度。考虑“干草”这个词，h 比 a 高，y 下降到 h 和 a 的下方（y 有一个叫做下降器的东西）。当您获得 SVG 中的文本边界框时，它会为您提供字形单元格大小。这通常足以容纳上升的字符，即 h 和下降的字符，即 y 字符。这就是 SVG 规范所说的方式，这就是为什么所有浏览器的工作方式都一样。

【参考方案4】：

在 chrome 中，naturalHeight 和 naturalWidth 似乎可以正确获取高度和宽度。试试看它们是否适合你？

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

根据我对 SVG 元素的经验，是的，它们有时会在它们周围有奇怪的填充位，例如行高，因此设置 line-height:0 会有所帮助。

另外，getBBox() 返回的对象实际上并不是以像素为单位的。它与包含SVG 元素的viewbox 相关——不一定是像素。我网站上的SVGs 的viewbox 可能为 500 x 500，但其尺寸仅为 25 x 25 像素。所以它可能与像素有很大不同。

【讨论】：

对不起，我的错误。如果我们使用 getBoudingClientRect 或 getBBox，结果是一样的。现在检查一下：s17.postimage.org/srm8ge2al/newone.png 我仍然认为它不是文本的中心点 :(

我更新了答案 - 试试naturalHeight 等。让我知道它们是否有效？

【参考方案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;