Faire pivoter le chemin svg autour du cercle

Question

Je veux faire tourner un polygone autour d'un cercle. Je veux fixer le point de départ du polygone au centre du cercle comme ceci http://www.enspiregroup.com . J'ai beaucoup essayé mais je suis resté bloqué.

Voir le code ci-dessous.

CSS et 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>

Answer 1

Je ne sais pas pourquoi le site dont vous avez donné le lien utilise un mélange de HTML et de SVG pour réaliser cette animation. Mais ce n'est certainement pas une façon simple d'y parvenir.

Il est beaucoup plus simple de mettre le cercle dans le SVG également.

.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>

Answer 2

Qu'en est-il de la transformation et de l'animation CSS ?

.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>