6

Я хочу вращать 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;
    }
  <?xml version="1.0"?>
    <div class="circle-wrap">
        <div class="main-circle">
           <svg class="circle-segment" class="circle-wrap"
           xmlns="http://www.w3.org/2000/svg" version="1.1"
           xmlns:xlink="http://www.w3.org/1999/xlink" >
           <path id="little" d="M180,180 v-180 a180,180 0 0,0 -180,180 z"        
           fill="#066a8e"></path>
           <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="00 60 70"
                          to="360 60 70"
                          dur="10s"
                          repeatCount="indefinite"/>
    
              </svg>
        </div>
    </div>

    

Свободный перевод вопроса Rotate svg path around circle от участника @Usama nadeem.

1

3 ответа 3

4

Конкретно в этом примере 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);
  }
}
<div class="circle"></div>

Более того, анимированным 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%;
}
<div class="circle"></div>

0
4

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

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

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

<animateTransform attributeName="transform" attributeType="XML" type="rotate"

.circle-segment {
  width: 360px;
  height: 360px;
}
<div class="circle-wrap">
  <div class="main-circle">

    <svg class="circle-segment" class="circle-wrap"
         xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink" >
      <circle cx="180" cy="180" r="150" fill="#0c272e"/>
      <path id="little" d="M180,180 v-180 a180,180 0 0,0 -180,180 z"        
            fill="#066a8e">
        <animateTransform attributeName="transform"
                           attributeType="XML"
                           type="rotate"
                           from="00 180 180"
                           to="360 180 180"
                           dur="10s"
                           repeatCount="indefinite"/>
      </path>
    
    </svg>
  </div>
</div>

Свободный перевод ответа от участника @Paul LeBeau.

2

Решение 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);
  }
}
<div class="main-circle">
  <svg>
    <path d="M180,180 v-180 a180,180 0 0,0 -180,180 z" fill="#066a8e">
  </svg>
</div>

Свободный перевод ответа от участника @Sam.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.