Add text in front of a rect

[julianschmuckli]

Hello,

I'm trying to set a small text in front of a rectangle. Unfortunately, it shows only the rectangle and not the text when I use this code:

<section height="50" width="200">
    <rect fill="green" x="0" y="0" width="200" height="50"></rect>
    <text x="100" y="25" fill="red" text-anchor="middle" alignment-baseline="central">Hello</text>
</section>

I using it in a scroll view by the way.

Can anyone help me what I am doing wrong?

Thank you in advance. 

[SunsetRunner · Accepted solution]

You will need a font (either default on css for text or explicit as below

<svg>
  <section height="50" width="200">
      <rect fill="green" x="0" y="0" width="200" height="50"></rect>
      <text font-family="Seville-Bold" x="100" y="35" fill="red" text-anchor="middle">Hello</text>
  </section>
</svg>

And alignment-baseline="central" gives an error.

Hope the above helps