Вот что я сделал. Внизу скриншоты того, что получилось, и того, что я сделал. Неделю мучаюсь, не знаю как доделать.
<!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 - то, что я не могу сделать. помогити(