how to show full text over the svg height?-CodePudding

how to show full text in the svg , after rotation its showing partially, how to show the text over the height of the svg control.

  <svg  width="100" viewBox="-3 0 68 196">
      <text x="90" y="0" fill="red" transform="rotate(90)">Andaman and Nicobar Islands</text> 
<text x="90" y="-50" fill="red" transform="rotate(90)">United States of America</text>
      
    </svg>

CodePudding user response：

Try this:

   <svg height="100vh" width="100" >
      <text x="0" y="0" fill="red" transform="rotate(90)">Andaman and Nicobar Islands</text> 
<text x="0" y="-50" fill="red" transform="rotate(90)">United States of America</text>
      
    </svg>

CodePudding user response：

After setting your text x value to 0 its seems good to me.

  <svg  width="100" viewBox="-3 0 68 196">
      <text x="0" y="0" fill="red" transform="rotate(90)">Andaman and Nicobar Islands</text> 
<text x="0" y="-50" fill="red" transform="rotate(90)">United States of America</text>
      
    </svg>