如何根据文本宽度动态调整SVG矩形的大小？

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200">
  <text id="text" x="0" y="50">Hello, World!</text>
  <rect id="rect" x="0" y="0" width="0" height="30" fill="blue" />
</svg>

<script>
  // 获取文本元素和矩形元素
  var textElement = document.getElementById('text');
  var rectElement = document.getElementById('rect');

  // 获取文本的边界框信息
  var textWidth = textElement.getBBox().width;

  // 调整矩形的大小和位置
  rectElement.setAttribute('width', textWidth);
  rectElement.setAttribute('x', textElement.getAttribute('x'));
  rectElement.setAttribute('y', textElement.getAttribute('y') - rectElement.getAttribute('height'));
</script>