SVG: text inside rect

text svg rect
Jakub M. picture Jakub M. · Jul 17, 2011 · Viewed 217.8k times · Source

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.

Answer

KeatsKelleher picture KeatsKelleher · Jul 18, 2011

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>

Related questions

How to place and center text in an SVG rectangle

I have the following rectangle... <rect x="0px" y="0px" width="60px" height="20px"/> I would like to center the word "Fiction" inside of it. For other rectangles, does svg word wrap to stay within them? I can't …

Read More
Auto line-wrapping in SVG text

I would like to display a <text> in SVG what would auto-line-wrap to the container <rect> the same way as HTML text fills <div> elements. Is there a way to do it? I don't …

Read More
rotate x axis text in d3

I am new to d3 and svg coding and am looking for a way to rotate text on the xAxis of a chart. My problem is that typically the xAxis titles are longer than the bars in the bar chart …

Read More