Помогите доделать задание, пожалуйста. Наработки присутствуют.

Вот что я сделал. Внизу скриншоты того, что получилось, и того, что я сделал. Неделю мучаюсь, не знаю как доделать.

<!DOCTYPE html>

<html>

 

<head>

    <meta charset='utf-8'>

    <meta http-equiv='X-UA-Compatible' content='IE=edge'>

    <title>Four sectors circle</title>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

</head>

 

<body>

    <h1>Круг из четырех секторов</h1>

 

    <style>

        .custom-button>use {

            fill: rgb(202, 20, 36);

        }

 

        .custom-button:hover {

            stroke: black;

        }

    </style>

 

    <svg id="svg1" version="1.1" viewBox="0 0 500 500" height="500mm" width="500mm">

        <defs>

            <path id="sector" d="M 0,0 V 25 A 25,25 0 0 0 25,0 Z" />

        </defs>

        <g id="g1" class="custom-button">

            <use xlink:href="#sector" transform="translate(25 25) rotate(45) " class="draggable" />

            <use xlink:href="#sector" transform="translate(25 25) rotate(135)" class="draggable" />

            <use xlink:href="#sector" transform="translate(25 25) rotate(-45)" class="draggable" />

            <use xlink:href="#sector" transform="translate(25 25) rotate(-135)" class="draggable" />

        </g>

    </svg>

    <script>

function addGroup(elems)

        {

            let group = document.createElementNS("http://www.w3.org/2000/svg", "g");

            let parent = elems[0].parentNode;

            parent.insertBefore(group,elems[0]);

            for (let e of elems)

            {

                group.appendChild(e);

            }

        }

        let btnid = 1;

        let svg1 = document.getElementById("svg1");

        document.getElementById("g1").addEventListener("click", function (evt)

        {

            let newButton = document.getElementById("g1").cloneNode(true);

            newButton.id = "g" + ++btnid;

            //setGPos(newButton, 0, 50);

            svg1.appendChild(newButton);

            newButton.setAttribute("transform", 'translate(0,50)');

            newButton.addEventListener("mousedown", startDrag);

            newButton.addEventListener("mousemove", drag);

 

        });

 

        function getMousePosition(evt)

        {

            var CTM = svg1.getScreenCTM();

            return {

                x: (evt.clientX - CTM.e) / CTM.a,

                y: (evt.clientY - CTM.f) / CTM.d

            };

        }

 

 

 

        var selectedElement, offset, transform;

      function startDrag(evt)

        {

            if (evt.target.classList.contains('draggable') && evt.buttons === 1)

            {

                selectedElement = evt.target.parentNode;

                offset = getMousePosition(evt);

 

                // Get all the transforms currently on this element

                var transforms = selectedElement.transform.baseVal;

                // Ensure the first transform is a translate transform

                if (transforms.length === 0 ||

                    transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE)

                {

                    // Create an transform that translates by (0, 0)

                    var translate = svg1.createSVGTransform();

                    translate.setTranslate(0, 0);

                    // Add the translation to the front of the transforms list

                    selectedElement.transform.baseVal.insertItemBefore(translate, 0);

                    // Сюда добавляем логику перемещения линий

                }

                // Get initial translation amount

                transform = transforms.getItem(0);

                offset.x -= transform.matrix.e;

                offset.y -= transform.matrix.f;

            }

        }

 

        function drag(evt)

        {

            if (selectedElement && evt.buttons === 1)

            {

                evt.preventDefault();

                var coord = getMousePosition(evt);

                transform.setTranslate(coord.x - offset.x, coord.y - offset.y);

               // Сюда добавляем логику перемещения линий

            }

        }

 

    </script>

</body>

 

</html>

https://ibb.co/CBQvRH2 - то, что я сделал. Тут почему то пикча не грузится, хоть расширение и .png.
https://ibb.co/2F7ZV4j - то, что я не могу сделать. помогити(