Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't the text in svg show up?

Tags:

svg

I have a simple svg element,

<svg height="100" width="710">
  <rect width="700" height="50"/>
    <rect width="70" height="50" style="fill: rgb(0, 0, 255);">
      <text y="0" style="fill: white;">-0.123994</text>
    </rect>
    <rect width="70" height="50" style="fill: rgb(255, 0, 0);" transform="translate(630,0)">
    <text y="50">0.387869</text>
  </rect>
</svg>

Why don't either of the text elements show up? This is what it shows: enter image description here

like image 892
highBandWidth Avatar asked Oct 16 '12 19:10

highBandWidth


1 Answers

You can not put text tag within rect . If you want to display text inside a rect element you should put them both in a group.

<svg height="100" width="710">
    <g>
    <rect width="70" height="50" style="fill: rgb(0, 0, 255);"></rect>
      <text y="0" style="fill: white;">-0.123994</text>
    </g>
    <g>
    <rect width="70" height="50" style="fill: rgb(255, 0, 0);" transform="translate(630,0)"></rect>
    <text y="50">0.387869</text>
   </g>

</svg>

Please adjust the coordinates of text to show up within rect.

like image 157
Smita Avatar answered Sep 28 '22 02:09

Smita