Javascript 向SVG多边形点添加控制柄

我想在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);
}

---

您是否编写了任何代码来尝试向多边形添加控制柄？添加更多SVG圆并向它们添加拖动事件侦听器。拖动多边形时，更改

点阵列

并更新多边形的

点

属性。是否编写了代码尝试向多边形添加句柄？添加更多SVG圆并向其添加拖动事件侦听器。拖动多边形时，更改

点光线

，并更新多边形的

点

属性。