GeorgieDev,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
svg{width:300px;display:block;margin:0 auto;}
use:hover{fill:#000;}
</style>
</head>
<body>
<svg viewBox="0 0 10 10">
<defs>
<clipPath id="circle">
<circle cx="5" cy="5" r="5" />
</clipPath>
<rect id="seg" y="0" width="14" height="10" />
</defs>
<g clip-path="url(#circle)">
<use xlink:href="#seg" fill="pink"/>
<use xlink:href="#seg" fill="green" />
<use xlink:href="#seg" fill="orange" />
<use xlink:href="#seg" fill="teal" />
<use xlink:href="#seg" fill="tomato"/>
<use xlink:href="#seg" fill="gold"/>
<use xlink:href="#seg" fill="darkorange" />
</g>
</svg>
<script>
document.querySelectorAll('use').forEach((el, i) => el.setAttribute('x', 10/7*i))
</script>
</body>
</html>