对齐svg文本元素的文本而不影响位置



如何在不使用text-anchor属性的情况下对齐文本标记中的文本?我的问题是,使用text-anchor会改变xy属性的解释方式,我不希望这样,因为我已经完美地设置了这样的元素组的位置:

<text>
<tspan x="206" y="142.2">hello</tspan>
<tspan x="206" dy="15">there, all good?</span>
</text>

我不希望它被更改,因此重新编码整个svg设置只是为了文本布局。例如,如果我在这里应用text-anchor="middle",这可以使文本居中,但它将x(206(更改为文本的中心。我使用svg中的x值将文本元素放置在系统中的一个精确位置,因此对x坐标的其他解释1(破坏整个布局,2(甚至使文本元素的精确放置变得不可能,因为插入的文本可能是可变长度的,因此无法预测将其放置在所需位置所需的文本标记的x坐标。所以我想一定有更好的方法来达到我想要的?

您可以通过调整每个文本片段的dx来手动居中SVG文本,并使用从对每个片段调用getComputedTextLength((返回的宽度作为输入。

最新更新