如何在javascript中将多边形拆分为多个多边形？

我想做些什么

客户画线

按客户端行分割svg区域

当鼠标悬停在切片区域时，更改背景颜色

我已经做了1。。但我做不到2 （谷歌搜索了一下……但我找不到合适的答案。）

如何将多边形拆分为多条直线？ 如果你能帮助我，我将非常高兴

    <div id="wrap">
        <svg id="svg" width="300" height="300"></svg>
    </div>

    <script>
        /*off contexmenu*/
        if (document.addEventListener) { // IE >= 9; other browsers
            document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            }, false);
        } else { // IE < 9
            document.attachEvent('oncontextmenu', function() {
                window.event.returnValue = false;
            });
        }
        
        
        var svg = document.getElementById("svg");
        
        let painting = false;
        let startX=0, startY=0;
        
        function startPainting(e){
        
            var x = e.clientX-svg.getBoundingClientRect().left;
            var y = e.clientY-svg.getBoundingClientRect().top;
            
            startX = x;
            startY = y;
            painting = true;
            
            /*add line*/
            var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
            newLine.setAttribute('class','line');
            newLine.setAttribute('x1',x);
            newLine.setAttribute('y1',y);
            newLine.setAttribute('x2',x);
            newLine.setAttribute('y2',y);
            newLine.setAttribute("stroke", "black");
            newLine.setAttribute("fill", "black");
            newLine.setAttribute("stroke-width", "3px");
            newLine.addEventListener('mouseover', function(e){
                if(!painting)
                    e.target.setAttribute("stroke", "green");
            });
            newLine.addEventListener('mouseleave', function(e){
                e.target.setAttribute("stroke", "black");
            });
            newLine.addEventListener('contextmenu', function(e){
                if(!painting)
                    svg.removeChild(e.target);
            });
            svg.append(newLine);
               
        }
        function stopPainting(e){
            if(painting){
                painting = false;
                var i = svg.children.length;
                svg.removeChild(svg.children.item(i-1));
            }
        }
        function onMouseMove(e){
            
            var x = e.clientX-svg.getBoundingClientRect().left;
            var y = e.clientY-svg.getBoundingClientRect().top;
           
            if(painting){
                svg.children.item(svg.children.length-1).setAttribute('x2', x);
                svg.children.item(svg.children.length-1).setAttribute('y2', y);
            }
        }
        

        svg.addEventListener('mousemove', onMouseMove);
        svg.addEventListener('mouseleave', stopPainting);
        svg.addEventListener('contextmenu', stopPainting);
        svg.addEventListener('click', startPainting);
    </script>

/*非上下文菜单*/
if（document.addEventListener）{//IE>=9；其他浏览器
document.addEventListener（'contextmenu'，函数（e）{
e、 预防默认值（）；
}，假）；
}否则{//IE<9
document.attachEvent（'oncontextmenu'，function（））{
window.event.returnValue=false；
});
}
var svg=document.getElementById（“svg”）；
让绘画=虚假；
设startX=0，startY=0；
功能启动打印（e）{
var x=e.clientX-svg.getBoundingClientRect（）.left；
var y=e.clientY-svg.getBoundingClientRect（）.top；
startX=x；
startY=y；
绘画=真实；
/*添加行*/
var newLine=document.createElements（'http://www.w3.org/2000/svg","行",；
setAttribute（'class'，'line'）；
newLine.setAttribute（'x1'，x）；
newLine.setAttribute（'y1'，y）；
newLine.setAttribute（'x2'，x）；
newLine.setAttribute（'y2'，y）；
newLine.setAttribute（“笔划”、“黑色”）；
newLine.setAttribute（“填充”、“黑色”）；
setAttribute（“笔划宽度”、“3px”）；
newLine.addEventListener（'mouseover'，函数（e）{
如果（！绘画）
e、 setAttribute（“笔划”、“绿色”）；
});
newLine.addEventListener（'mouseleave'，函数（e）{
e、 setAttribute（“笔划”、“黑色”）；
});
newLine.addEventListener（'contextmenu'，函数（e）{
如果（！绘画）
svg.removeChild（e.target）；
});
追加（换行符）；
}
功能停止上漆（e）{
如果（绘画）{
绘画=假；
var i=svg.childrence.length；
removeChild（svg.children.item（i-1））；
}
}
移动鼠标的功能（e）{
var x=e.clientX-svg.getBoundingClientRect（）.left；
var y=e.clientY-svg.getBoundingClientRect（）.top；
如果（绘画）{
svg.children.item（svg.children.length-1）.setAttribute（'x2'，x）；
svg.children.item（svg.children.length-1）.setAttribute（'y2'，y）；
}
}
addEventListener（'mousemove'，onMouseMove）；
svg.addEventListener（'mouseleave'，停止绘制）；
addEventListener（'contextmenu'，停止绘制）；
svg.addEventListener（“单击”，开始绘制）；

在正方形顶部（直线未到达边缘处），您希望发生什么？无论如何，试着在你最喜欢的搜索引擎中输入“线段多边形交点”。请看看这支钢笔：这可能就是你需要的我解决的问题！！谢谢！！！！！！！