svg - 为什么svg中的文字不显示？

Question

我有一个简单的 svg 元素，

<svg height="100" width="710">
  <rect width="700" height="50"/>
    <rect width="70" height="50" style="fill: rgb(0, 0, 255);">
      <text y="0" style="fill: white;">-0.123994</text>
    </rect>
    <rect width="70" height="50" style="fill: rgb(255, 0, 0);" transform="translate(630,0)">
    <text y="50">0.387869</text>
  </rect>
</svg>

为什么没有任何一个text元素出现？这就是它所显示的：

Answer 1

你不能把text标签放在rect. 如果要在 rect 元素中显示文本，则应将它们放在一个组中。

<svg height="100" width="710">
    <g>
    <rect width="70" height="50" style="fill: rgb(0, 0, 255);"></rect>
      <text y="0" style="fill: white;">-0.123994</text>
    </g>
    <g>
    <rect width="70" height="50" style="fill: rgb(255, 0, 0);" transform="translate(630,0)"></rect>
    <text y="50">0.387869</text>
   </g>

</svg>

请调整文本的坐标以显示在矩形内。