title: SVG element rotate on circle
body: <p>So I have a SVG element - big circle - and  group of elements inside . </p>
  
  <p>I would like to rotate this elements around this big circle. The code is very simply, but I'm already freaking out how to set this circle (graph__skils) on correct path (big circle). As you can see on link below this small circle isn't rotating correct on the big circle. Please help</p>
  
  <p><a href="https://jsfiddle.net/n5amvbdw/" rel="noreferrer">Circle rotate jsfiddle</a></p>
  
  <p><strong>HTML file</strong></p>
  
  <pre><code>&lt;section class="graph"&gt;
   &lt;svg xmlns="http://www.w3.org/2000/svg" 
      width="670" 
      height="696" 
      viewBox="0 0 670 696"&gt;
      &lt;g&gt;
        &lt;g class="graph__middle"&gt;
           &lt;path fill="#3f9" d="M345 264c34.794 0 63 28.206 63 63s-28.206 63-63 63-63-28.206-63-63 28.206-63 63-63z"/&gt;
        &lt;/g&gt;
  
         &lt;g class="graph__design" &gt;
            &lt;g class="graph_mainCircle"&gt;
               &lt;path fill="none" stroke="#cf9" stroke- linecap="round" stroke-linejoin="round" stroke-miterlimit="50" d="M345 197c71.797 0 130 58.203 130 130s-58.203 130-130 130-130-58.203-130-130 58.203-130 130-130z"/&gt;
            &lt;/g&gt;
  
            &lt;g class="graph__skills"&gt;
               &lt;g class="graph__middle"&gt;
                  &lt;path fill="#cf9" d="M445.053 387c11.052 0 20.012 8.954 20.012 20s-8.96 20-20.012 20-20.012-8.954-20.012-20 8.96-20 20.012-20z"/&gt;
                &lt;/g&gt;
           &lt;/g&gt;
        &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p></p>
  
  <p>SCSS file</p>
  
  <pre><code>.graph {
    position: relative;
    width:500px;
    height:500px;
  
    svg {
      position: relative;
      border: 2px solid blue;
      width: 99%;
      height: 99%;
    }
  
    &amp;__design {
      position: relative;
    }
  
    &amp;__skills {
      transform-origin: center;
      position: absolute;
      animation: mercury-group 18s linear infinite;
    }
  
    &amp;__middle {
      position: relative;
    }
  }
  
  @keyframes mercury-group {
    0% {
      transform: rotateZ(0deg);
    }
  
    100% {
      transform: rotateZ(-360deg);
    }
  }
  </code></pre>