Insert text between a rectangle drawn in SVG

Question

I have a code in SVG:

<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" width="250" height="250" style="fill:blue">
        <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
    </rect>
</svg>

Now I need to add a text between this rectangle. Can anyone tell me how to do it?

I assume the lack of a space between your `version` and `xmlns` attributes is a typo just in your posting? — Phrogz, Mar 27 '11 at 15:39
Possible duplicate of [Auto line-wrapping in SVG text](http://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text). — Phrogz, Mar 27 '11 at 15:48

score 20 · Accepted Answer · edited May 23 '17 at 12:08

I am not sure what you mean by "between". If you mean "centered horizontally and vertically", then this would do it:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="250" height="250" style="fill:blue" />
  <text x="145" y="145" text-anchor="middle" alignment-baseline="middle">
    Hello World
  </text>
</svg>

Did you mean something else?

If you are talking about having text filling the rectangle—multiple lines of text wrapping at the edges of the rectangle onto a new line—then you should see this Stack Overflow question instead.

Insert text between a rectangle drawn in SVG

1 Answers1

Linked