Вращение SVG path вокруг окружности

Я хочу вращать polygon вокруг круга.
Я хочу зафиксировать отправную точку полигона в центре круга, подобно этому - http://www.enspiregroup.com
Я много пробовал, но не достиг этой цели.
Мой код ниже
CSS и HTML5
.circle-segment { position: absolute; top: 0; width: 260px; height: 260px; } div .circle-wrap { position: absolute; max-width: 360px; margin: 0 auto; top: 107px; left: 29.7%; } main.css:1032 .circle-wrap { width: 362px; height: 362px; } .main-circle { position: relative; height: 300px; width: 300px; background-color: #0c272e; border-radius: 50%; margin: 15px auto; }

Ответ

Конкретно в этом примере svg вообще не нужен:
.circle { width: 200px; height: 200px; border-radius: 50%; margin: 40px; position: relative; background-color: cadetblue; } .circle:before { content: ''; width: 220px; height: 220px; position: absolute; top: -10px; left: -10px; background: linear-gradient(rebeccapurple, rebeccapurple) no-repeat 110px 110px; border-radius: 50%; animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

Более того, анимированным svg элементом практически нельзя управлять, а автор сообщения именно это и хотел.
Вращение сектора происходит при прокрутке страницы.
var circle = document.querySelector('.circle'); window.addEventListener('scroll', function(){ circle.style.transform = 'rotate(' + window.pageYOffset + 'deg)'; }); body { min-height: 2000px; } .circle { width: 200px; height: 200px; border-radius: 50%; margin: 10px; position: fixed; background-color: cadetblue; transform: rotate(0deg); } .circle:before { content: ''; width: 220px; height: 220px; position: absolute; top: -10px; left: -10px; background: linear-gradient(rebeccapurple, rebeccapurple) no-repeat 110px 110px; border-radius: 50%; }