Why text in svg is not displayed?

Question

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 any of the text elements appear? Here is what he shows:

Answer 1

You cannot put a text tag in rect . If you want to display text inside a rect element, you must put them 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 the text to display inside the rectangle.