将手柄添加到SVG多边形点

Question

我想在SVG多边形的每个点上添加手柄（圆形），以便用户拖动它们以更改形状。 我的主页上有两个按钮，一个用于开始绘制新形状，另一个用于“完成”。这是我的代码：

const gardenMap = document.getElementById("garden-map");

let pointsArray = [];
let isCreatingField = false;
let fields = [] //to store coordinates

gardenMap.addEventListener('click', function(evt){
    var e = evt.target;
    var dim = e.getBoundingClientRect();
    var x = evt.clientX - dim.left;
    var y = evt.clientY - dim.top;
    if (isCreatingField) {
        pointsArray.push(x +','+ y);
    }
})

function startCreatingField() { //Start button
    isCreatingField = true;    
}

function finishCreatingField() { //Done button
    isCreatingField = false;  
    var field = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
    var pointsString = pointsArray.join(' ');
    field.setAttribute("points", pointsString);
    field.setAttribute("fill", "lime");
    gardenMap.appendChild(field);  
    fields.push(pointsArray);
    pointsArray = [];
    console.log(fields);
}