SVG获取文本元素宽度

Question

我工作的一些的ECMAScript/JavaScript来SVG文件,并需要获得width和height一个的text元素,所以我可以调整,围绕它的矩形.在HTML中,我可以使用元素上的offsetWidth和offsetHeight属性,但看起来这些属性不可用.

这是我需要使用的片段.每当我更改文本时我都需要更改矩形的宽度,但我不知道如何获得元素的实际width(以像素为单位)text.

<rect x="100" y="100" width="100" height="100" />
<text>Some Text</text>

有任何想法吗？

Answer 1

var bbox = textElement.getBBox();
var width = bbox.width;
var height = bbox.height;

然后相应地设置rect的属性.

链接:getBBox()在SVG v1.1标准中.

我上周一直在玩这些; getComputedTextLength()方法返回与getBBox().width相同的结果我尝试过的东西,所以我只使用了边界框,因为我需要宽度和高度.我不确定文本长度是否与宽度不同是否存在任何情况:我认为可能提供的方法是帮助文本布局,例如在多行上分割文本,而边界框是可用的通用方法在所有(？)元素上. (5认同)
谢谢.我还发现了另一个可以帮助宽度的功能.textElement.getComputedTextLength().今晚我会尝试一下,看看哪个对我更好. (3认同)
问题是，如果文本遵循路径，则宽度不是文本的实际宽度（例如，如果文本遵循圆形路径，则 bbox 是包围圆形的那个，并且获得的宽度不是'不是文本绕圆之前的宽度）。另一件事是 bbox.width 大 2 倍，所以如果元素检查器显示宽度为 200，那么 bbox.width 为 400。我不知道为什么。 (2认同)
除非文本已经附加到 DOM，否则这些方法似乎都不起作用。 (2认同)

Answer 2

document.getElementById('yourTextId').getComputedTextLength();

为我工作

Answer 3

关于文本的长度,链接似乎表示BBox和getComputedTextLength()可能返回稍微不同的值,但是彼此非常接近的值.