Вставить текст между прямоугольником, нарисованным в SVG

У меня есть код в 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>

Теперь мне нужно добавить текст между этим rectangle. Может ли кто-нибудь сказать мне, как это сделать?

Ответы

Ответ 1

Я не уверен, что вы подразумеваете под "между". Если вы имеете в виду "центрированные по горизонтали и вертикали", то это сделало бы это:

<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>

Вы имели в виду что-то еще?

Если вы говорите о том, что текст заполняет прямоугольник - несколько строк обертывания текста по краям прямоугольника на новую строку - тогда вы должны увидеть этот вопрос.