CODEWITHSUNDEEP
csssvg
AGamePlayer
AGamePlayer

Reputation: 7736

Is it possible to set a svg's <text>/<tspan> to a fixed width?

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>

Upvotes: 8

Views: 12880

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62773

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>

Upvotes: 6

Related Questions