CODEWITHSUNDEEP
htmlcsssvgtext
gita 98
gita 98

Reputation: 53

How to display the text the was cropped at end using svg of specified width

I am using svg to display text at specific position, But the text at end of the svg container is cropped. How to display that text.

I am using the following code

<svg width="100" style="background:yellow">
  <text x="0" y="100" stroke="red" text-anchor="middle">0</text>
  <text x="20" y="100" stroke="red" text-anchor="middle">20</text>
  <text x="40" y="100" stroke="red" text-anchor="middle">40</text>
  <text x="60" y="100" stroke="red" text-anchor="middle">60</text>
  <text x="80" y="100" stroke="red" text-anchor="middle">80</text>
  <text x="100" y="100" stroke="red" text-anchor="middle">100</text>
</svg>

I want to display 0 and 100 completely and don't want to change the svg container width

Upvotes: 1

Views: 65

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

In order not to change the size of the numbers and see all of them, you need to add a viewBox and increase the width

<svg width="130" viewBox="-10 0 130 130" style="background:yellow">
  <text x="0" y="100" stroke="red" text-anchor="middle">0</text>
  <text x="20" y="100" stroke="red" text-anchor="middle">20</text>
  <text x="40" y="100" stroke="red" text-anchor="middle">40</text>
  <text x="60" y="100" stroke="red" text-anchor="middle">60</text>
  <text x="80" y="100" stroke="red" text-anchor="middle">80</text>
  <text x="100" y="100" stroke="red" text-anchor="middle">100</text>
</svg>

Upvotes: 1

Related Questions