Question

我希望将文本与圆形元素对齐，方式是文本向左展开而不是向右展开。意思是，右边界始终处于同一位置。

<svg version="1.1" class="merge" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 180 35" enable-background="new 0 0 180 35" xml:space="preserve" width="180px" height="35px">
    <circle cx="103.4" cy="28.1" r="4.8"/>
    <text y="10">works</text>
    <circle cx="103.4" cy="5.6" r="4.8"/>
    <text y="33">does not work at all</text>
</svg>

http://jsfiddle.net/3XeXv/

现在的问题是，当文本变长时，它会覆盖圆圈。

如果可能，我想这样做而不必使用javascript移动文本。

Answer 1

使用值为end的text-anchor属性：

<text text-anchor="end" y="30" x="100">Where X defines the position of the text end</text>

将文本与圆对齐

1 个答案: