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

【问题标题】：Insert text between a rectangle drawn in SVG在 SVG 中绘制的矩形之间插入文本
【发布时间】：2011-07-23 22:08:13
【问题描述】：

我有一个 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 之间添加一个文本。谁能告诉我怎么做？

【问题讨论】：

我认为您的 version 和 xmlns 属性之间缺少空格是您的帖子中的拼写错误？
Auto line-wrapping in SVG text 可能重复。

标签： html animation text svg

【解决方案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>

你还有别的意思吗？

如果您说的是让文本填充矩形 - 多行文本在矩形边缘换行到新行 - 那么您应该看到 this Stack Overflow question。

【讨论】：