Q:

Как сделать анимацию вращения круга в звезде?

Как сделать анимацию вращения круга в звезде?

<svg>
 <polygon fill-rule="evenodd" stroke="black"
   points="150,0 121,90 198,35 102,35 179,90"/>
   <circle r="15" cx="150" cy="50" fill="none" stroke="red" stroke-width="4"/>
</svg>

A:

Круг надо разбить на сегменты, иначе не будет видно вращения
stroke-dasharray="3 2"
и применить правило 
transform-origin: center center;
    transform-box: fill-box;

Чтобы не искать центр вращения

 #circ {
  stroke:crimson;
  stroke-width:6;
  stroke-dasharray:3 2;
 transform-origin: center center;
 transform-box: fill-box;
 animation: rotate_disk 2s linear forwards infinite;
  }

  @keyframes rotate_disk {
   100% {
    transform: rotateZ(360deg);
   }
  }
<svg>
 <polygon fill-rule="evenodd" stroke="black"
   points="150,0 121,90 198,35 102,35 179,90"/>
   <circle id="circ" r="15" cx="150" cy="50" fill="none"> </circle>
</svg>

Update 
Более подробно о transform-box: fill-box с примерами в этом топике
Как заставить SVG фигуру кружиться вокруг середины блока?

A:

На вопрос уже дан ответ, этот топик для души
А вы заметили, что вместо звезды на шапке появилось сердце?

Добавлю анимацию звезды на старое место, для этого с картинки убираем иконку
 
Берем звезду из предыдущего ответа и с помощью команд transform="scale(0.35) translate(56 175)" уменьшаем и позиционируем звезду.   

<svg height="70vh"> 
 <image xlink:href="https://i.stack.imgur.com/cHM2F.png" width="147px" height="137px" />
  <g transform="scale(0.35) translate(56 175)">
 <polygon  id="star" fill-rule="evenodd" stroke="none" fill="crimson"
   points="150,0 121,90 198,35 102,35 179,90"/>
   <circle id="circ" r="15" cx="150" cy="50" fill="none"/>
   </g> 
   
</svg>

Добавляем анимацию вращения: 

#star {
 transform-origin: center center;
 transform-box:fill-box;
 animation: rotate_star 10s linear forwards infinite;
  }

  @keyframes rotate_star {
   100% {transform: rotateZ(360deg);}
    }
<svg height="100vh"> 
 <image xlink:href="https://i.stack.imgur.com/cHM2F.png" width="147px" height="137px" />
  <g transform="scale(0.35) translate(57 176)">
  <circle id="circ" r="50" cx="150" cy="45" fill="none"stroke-width="8" stroke="gold"/>
 <polygon  id="star" fill-rule="evenodd" stroke="none" fill="crimson"
   points="150,0 121,90 198,35 102,35 179,90"/>
  
   </g> 
   
</svg>

A:

Второе очевидное решение - двигать stroke-dashoffset:

<svg id="test" 
   viewBox=-300,-300,600,600 >

 <circle 
    stroke-dasharray="31.415 31.415" 
    r=100 
    stroke=red  
    stroke-width=30 
    fill=none >

<animate 
   attributeName="stroke-dashoffset" 
   from="0" 
   to="-62.83" 
   dur="1s" 
   repeatCount="indefinite" />

</circle>
  </svg>

