7

I want to align a text to the right and in this case I have to make the text in a fixed width. Because the text content is dynamically added.

<text>
  <tspan x="421" y="15" text-anchor="right"
     baseline-shift="0%" kerning="0" 
     font-family="Arial" font-weight="bold"
     font-size="12" fill="#490275" xml:space="preserve">
       This is entered by user.
</tspan>
</text>
AGamePlayer
  • 7,404
  • 19
  • 62
  • 119
  • 1
    Have you tried it? – Brett DeWoody Feb 02 '17 at 13:22
  • Are you talking about text-wrapping? If so then look http://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text http://stackoverflow.com/questions/475804/svg-word-wrap-show-stopper https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Wrapping_Text – Ruskin Feb 02 '17 at 14:01
  • Just set the font in the CSS of the SVG to `monospace` and that's it. – vsync Jun 19 '18 at 21:06

1 Answers1

5

I think your attempt is close, you're just using the wrong value for text-anchor. If you use text-anchor="end" it will align the text to the right of the element.

So, we can set the x position of the tspan to 100%, and along with text-anchor="end" the text will be positioned to the right regardless of length. 

<svg width="100%" height="110">
  <text>
  <tspan x="100%" y="15" text-anchor="end"
     baseline-shift="0%" kerning="0" 
     font-family="Arial" font-weight="bold"
     font-size="12" fill="#490275" xml:space="preserve">
       This is entered by user.
</tspan>
</text>
  Sorry, your browser does not support inline SVG.  
</svg>
Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184