Html SVG元素重叠，即使有正确的x和y

我在

svg

中一个接一个地显示一些

textbox

，它们通过

x

和

y

属性值进行定位。代码如下所示

2018年1月1日上午4:00:00
2018年1月1日上午4:00:00
最早日期时间结束
最早日期时间结束
你好
你好
dfsdf
dfsdf

您可以使用一点javascript来使用

getComputedTextLength（）

方法计算每个文本的位置

让h=hello.getComputedTextLength（）；
time.setAttributeNS（空，“x”，10+h+20）
设t=time.getComputedTextLength（）；
dfsdf.setAttributeNS（空，“x”，10+h+20+t+20）

你好
你好
dfsdf
dfsdf
2018年1月1日上午4:00:00
2018年1月1日上午4:00:00
最早日期时间结束
最早日期时间结束

如果删除日期字符串之间的空白，则宽度排列良好，不会发生重叠。但我不明白到底发生了什么！太令人沮丧了。我认为计算出的日期宽度在SDE date中包含空格，因为当我删除空格时，它也会将宽度减少到302。您的viewBox单位不再是像素，因此使用ClientRect（返回像素值）的测量将不再匹配SVG单位系统。这可能至少是其中的一部分。@MichaelMullany那么正确的方法是什么呢？有没有合适的计算方法？在你的第一个例子中，你在它们之间加上20px的常数间隔。但我试图做的只是基于文本元素的动态宽度。我在javascript中使用

getBoundingClientRect

函数来获取组元素的宽度。我不太确定我是否理解您的评论。您可以轻松删除20个单位或将其更改为其他值。我使用

getComputedTextLength（）

获取文本长度，结果与使用

getBBox（）

得到的结果相同。不要使用

getBoundingClientRect

我已经使用了

getBoundingClientRect

，因为IE不支持

getBBox