在svg中添加矩形周围的同心线

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  <rect x="50" y="50" width="300" height="300" fill="#ccc" />
  
  <!-- 添加同心线 -->
  <script>
    var centerX = 200; // 矩形中心点的X坐标
    var centerY = 200; // 矩形中心点的Y坐标
    var rectWidth = 300; // 矩形的宽度
    var rectHeight = 300; // 矩形的高度
    var numCircles = 5; // 同心线的数量
    
    for (var i = 0; i < numCircles; i++) {
      var radius = (rectWidth / 2) * (i + 1) / numCircles; // 计算同心线的半径
      
      var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      circle.setAttribute("cx", centerX);
      circle.setAttribute("cy", centerY);
      circle.setAttribute("r", radius);
      circle.setAttribute("fill", "none");
      circle.setAttribute("stroke", "black");
      
      document.querySelector("svg").appendChild(circle);
    }
  </script>
</svg>