在不影响位置的情况下对齐 svg 文本元素的文本
Align text of svg text element without affecting position
如何在不使用 text-anchor
属性的情况下对齐文本标签中的文本?我的问题是使用 text-anchor
会改变 x
和 y
属性的解释方式,我不希望这样,因为我已经完美地设置了位置这样的元素组:
<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() 返回的宽度用作输入。
如何在不使用 text-anchor
属性的情况下对齐文本标签中的文本?我的问题是使用 text-anchor
会改变 x
和 y
属性的解释方式,我不希望这样,因为我已经完美地设置了位置这样的元素组:
<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() 返回的宽度用作输入。