CSS Animation changes the element position

I have a hexagon inside a circle.

See the initial scenario: https://jsfiddle.net/njzwfvpf/

Now I want to add an animation rotating the hexagon 360deg inside the circle

This is the existing scenario with the css animation (fiddle here):

.rotate {
  -webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
          animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
@-webkit-keyframes rotating {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

<svg width="350" height="350">
  <svg width="350" height="350">
    <circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <svg viewBox="0 0 600 720" width="295" height="205">
      <g transform="translate(239, 370)" class="rotate">
        <path></path>
        <path d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"></path>
      </g>
      <svg viewBox="0 0 600 720" width="507.4" height="799.5">
        <g transform="translate(105, 395)">
          <path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"></path>
        </g>
      </svg>
    </svg>
  </svg>
</svg>

The problem is that adding the animation the Hexagon changes its position, it is not inside the circle nanymore.

What am I doing wrong ? How can I fix it?

Solution

The issue you are facing is that you are applying a transform with CSS (rotate(360deg)) while you already have a transform on the same element in the SVG (translate(239, 370)). You can solve this with 2 approaches :

apply all the transforms with CSS so you can control the animation with CSS
apply the CSS animation on the child element (the hexagon)

Here is an example of how you can solve it with the second approach :

.rotate {
  -webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
          animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
@-webkit-keyframes rotating {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

<svg width="350" height="350">
  <svg width="350" height="350">
    <circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
    <svg viewBox="0 0 600 720" width="295" height="205">
      <g transform="translate(239, 370)">
        <path></path>
        <path class="rotate" d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"></path>
      </g>
      <svg viewBox="0 0 600 720" width="507.4" height="799.5">
        <g transform="translate(105, 395)">
          <path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"></path>
        </g>
      </svg>
    </svg>
  </svg>
</svg>