Search code examples
svgtextrectangles

SVG: text inside rect

I want to display some text inside SVG rect. Is it possible?

I tried 

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red">
      <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text>
    </rect>
  </g>
</svg>

But it does not work.

Solution

  • This is not possible. If you want to display text inside a <rect> element you should put them both in a group with the <text> element coming after the <rect> element ( so it appears on top ).

    <svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red"></rect>
    <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
  </g>
</svg>