Ich habe ein Sechseck in einem Kreis.CSS Animation ändert die Elementposition
Siehe Ausgangsszenario: https://jsfiddle.net/njzwfvpf/
Jetzt möchte ich in den Kreis
Dies ist das bestehende Szenario mit der CSS-Animation (fiddle here) eine Animation Drehen des Sechsecks 360 Grad hinzuzufügen:
.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>
Das Problem m ist das Hinzufügen der Animation das Hexagon ändert seine Position, es ist nicht innerhalb des Kreises nanymore.
Was mache ich falsch? Wie kann ich es reparieren?