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

#html #css #css3 #svg #анимация

Я хочу вращать 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;
    }
  
    

        

           
        
    

    



    

Ответы

Ответ 1

Конкретно в этом примере 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%;
}



Ответ 2

Я не знаю, почему сайт, на который вы указали, использует смесь HTML и SVG для создания
этой анимации. Но это, конечно, не самый простой способ добиться этого. 

Гораздо проще просто поместить круг в SVG. 

И использовать команду анимации вращения  svg  


  


    
  

Ответ 3

Решение CSS По сравнению с вариантом решения SVG,- анимация вращения полигона на 360 градусов перенесена в правила CSS. В svg части остался только сам полигон. .main-circle { background-color: #0c272e; border-radius: 50%; height: 300px; margin: 15px auto; position: relative; width: 300px; } svg { animation: rotate 5s infinite linear; height: 362px; left: -31px; position: absolute; top: -31px; width: 362px; } @keyframes rotate { 100% { transform: rotate(360deg); } }

Источник: