如何在特定的svg元素后添加svg文本元素？(或者有更简单的方法可以做到这一点？)

<svg width="200" height="200">
  <g>
    <!-- 目标SVG元素 -->
    <rect x="10" y="10" width="100" height="100" fill="blue"/>
    <!-- 文本元素 -->
    <text x="20" y="120" font-family="Arial" font-size="20" fill="white">Hello SVG</text>
  </g>
</svg>

<svg width="200" height="200">
  <!-- 目标SVG元素 -->
  <rect x="10" y="10" width="100" height="100" fill="blue"/>
  <!-- 文本元素 -->
  <text x="20" y="120" font-family="Arial" font-size="20" fill="white">Hello SVG</text>
</svg>

<style>
  .text-position {
    position: absolute;
    top: 120px;
    left: 20px;
  }
</style>

<svg width="200" height="200">
  <!-- 目标SVG元素 -->
  <rect x="10" y="10" width="100" height="100" fill="blue"/>
  <!-- 文本元素 -->
  <text class="text-position" font-family="Arial" font-size="20" fill="white">Hello SVG</text>
</svg>