problem description

I need to implement such a function, click on the svg circle to generate a new svg and connect it with a line

the environmental background of the problems and what methods you have tried

1. Click to generate a new circle, how to make its connected line undeformed, x y I can get;
2. How to monitor it beyond the screen, I need to limit dynamic generation; (I have solved this. Judge that the approximate position of his x y minus a circle is not less than 10, no more than 90)
3. Why don"t dynamically generated circles overlap;

related codes

/ / Please paste the code text below (do not replace the code with pictures)

<svg class="svg" ref="svg" :viewBox="viewX,viewY,viewW,viewH">
  <!--,rx,ry x y,cx y-->
  <circle v-for="(coord,index) in circleCoord" :cx="coord.cx + "%"" :cy="coord.cy + "%"" r="30" 
    ref="circle" :fill="coord.color" class="circle" :key="index" @click="newCircle(coord)">
    
  </circle>
</svg>

data () {
    return {
      viewX: 0,
      viewY: 0,
      viewW: 100 + "%",
      viewH: 100 + "%",
      circleCoord: [
        {cx: 50,cy: 50,color: "-sharp" + Math.random().toString(16).slice(2,8)},
      ],
      cx: 50,cy: 50,
    }
},

methods: {
    newCircle (coord){
      console.log(coord);
      if(coord.cx > 10 && coord.cx < 90 && coord.cy > 10 && coord.cy < 90){
        
      }
      // console.log(this.$refs.svg.clientWidth);
      // console.log(this.$refs.circle.cx)
    }  
},

what result do you expect? What is the error message actually seen?

is similar to the cell map, but the difference is whether it is 3D