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

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

我想做

1. 客户画线
2. 按客户行分割 svg 区域
3. 当鼠标悬停切片区域时，更改背景颜色

我已经做了 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>