Align text to circle


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="" xmlns: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>

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


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


There is currently no discussion for this recipe.

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