text - SVG:矩形内的文本

Question

我想在 SVG rect 中显示一些文本。可能吗？

我试过了

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

但是它不起作用。

Answer 1

这是不可能的。如果您想在矩形元素内显示文本，则应将它们放在一个组中，其中文本元素位于矩形元素之后(因此它显示在顶部)。

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