Align text to circle

Problem

I want to align text to a circle element, in a way that the text expands to the left instead of to the right. Meaning, that the right boundary is always at the same position.

<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/

The problem with this right now is that when the text gets to long, it overlays the circle.

If possible I would like to do this without having to move the text with javascript.

Problem courtesy of: brancz

Solution

Use the text-anchor attribute with the value end:

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

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.