在SVG中绘制的矩形之间插入文本

时间:2011-03-27 14:36:25

标签: html animation text 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 个答案:

答案 0 :(得分:18)

我不确定你在“之间”是什么意思。如果你的意思是“水平和垂直居中”,那么这样就可以了:

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

你的意思是什么吗?

如果您正在讨论将文本填充矩形 - 将矩形边缘的多行文本换行到新行 - 那么您应该看到this Stack Overflow question