3

我遇到了 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 这就是我需要做的一切。

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

4

5 回答 5

0

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

于 2012-09-03T14:56:22.477 回答
0

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

于 2012-09-03T14:25:43.010 回答
0

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

于 2012-09-03T15:26:10.193 回答
0

在 chrome 中，naturalHeight似乎naturalWidth得到了正确的高度和宽度。试试看它们是否适合你？

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

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

此外，返回的对象getBBox()实际上并不是以像素为单位的。它相对于viewbox包含SVG元素的 - 不一定是像素。SVG我网站上的 s 可能有viewbox500 x 500 的大小，但其样式只有 25 x 25 像素。所以它可能与像素有很大不同。

于 2012-09-03T14:35:15.657 回答
0

你可以使用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;
于 2017-06-09T06:37:08.270 回答