SVG element rotate on circle - css

Question

So I have a SVG element - big circle - and group of elements inside .
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
Circle rotate jsfiddle
HTML file
<section class="graph">
<svg xmlns="http://www.w3.org/2000/svg"
width="670"
height="696"
viewBox="0 0 670 696">
<g>
<g class="graph__middle">
<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"/>
</g>
<g class="graph__design" >
<g class="graph_mainCircle">
<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"/>
</g>
<g class="graph__skills">
<g class="graph__middle">
<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"/>
</g>
</g>
</g>
</g>
</svg>
SCSS file
.graph {
position: relative;
width:500px;
height:500px;
svg {
position: relative;
border: 2px solid blue;
width: 99%;
height: 99%;
}
&__design {
position: relative;
}
&__skills {
transform-origin: center;
position: absolute;
animation: mercury-group 18s linear infinite;
}
&__middle {
position: relative;
}
}
#keyframes mercury-group {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}

Answer 1

The center of the svg element is not the center of your planets. You will need to change the transform-origin to 345px 328px. In order to calculate the new center I've used the getBBox() method for the graph__middle
.graph {
position: relative;
width: 500px;
height: 500px;
}
.graph svg {
position: relative;
border: 2px solid blue;
width: 99%;
height: 99%;
}
.graph__design {
position: relative;
}
.graph__skills {
transform-origin: 345px 328px;
position: absolute;
animation: mercury-group 18s linear infinite;
}
.graph__middle {
position: relative;
}
#keyframes mercury-group {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
<section class="graph">
<svg xmlns="http://www.w3.org/2000/svg"
width="670"
height="696"
viewBox="0 0 670 696">
<g>
<g class="graph__middle" id="KK">
<path fill="red" 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"/>
</g>
<g class="graph__design" >
<g class="graph_mainCircle">
<path fill="none" stroke="black" 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"/>
</g>
<g class="graph__skills">
<g class="graph__middle">
<path 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"/>
</g>
</g>
</g>
</g>
<circle cx="345" cy="328" r="3" />
</svg>
</section>

Answer 2

You can rotate the big circle instead like below:
.graph {
position: relative;
width: 500px;
height: 500px;
}
svg {
position: relative;
border: 2px solid blue;
width: 99%;
height: 99%;
}
.graph__design {
position: relative;
transform-box:fill-box;
transform-origin: center;
animation: mercury-group 18s linear infinite;
}
.graph__skills {
transform-origin: center;
position: absolute;
}
.graph__middle {
position: relative;
}
#keyframes mercury-group {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
<section class="graph">
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="696" viewBox="0 0 670 696">
<g>
<g class="graph__middle">
<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"/>
</g>
<g class="graph__design" >
<g class="graph_mainCircle">
<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"/>
</g>
<g class="graph__skills">
<g class="graph__middle">
<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"/>
</g>
</g>
</g>
</g>
</svg>
</section>

Answer 3

SVG example
My example doesn't answer exactly your question but I hope you take some ideas from my answer.
Judging by the names of the animation mercury-group you want to create a model of the solar system.
I propose a variant of the animation of the rotation of the planet around the sun.
I located the center of rotation of the planets of the solar system in the center of the sun which has coordinates x =" 250 " y =" 175 " center of the sun
Therefore, the animation team of the rotation of the planet around the sun has the following form:
<animateTransform
attributeName="transform"
type="rotate"
values="0 250 175;360 250 175"
dur="12s"
repeatCount="indefinite"
/>
Filters and gradients are used to design the appearance of the planet and the sun.
Animation of the ripple of the sun and changing its color
<radialGradient id="gradSun">
<stop offset="80%" stop-color="yellow">
<animate attributeName="offset" values="80%;20%;80%" dur="6s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="gold" >
<animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" />
</stop>
</radialGradient>
Below is the full animation code for the rotation of the planet around the sun:
.solar-system{
background-color:#002;
width:100%;
height:100%;
}
.sun{
fill:url(#gradSun);
filter:url(#dropShadow2);
}
.Earth-orbit{
stroke:rgba(255,255,255,.4);
stroke-width:1;
fill:none;
}
.Earth{
filter:url(#dropShadow1);
fill:url(#gradEarth);
}
<div class="solar-system">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 500 400" >
<defs>
<filter id="dropShadow1"
x="-20%" y="-20%"
width="150%" height="150%">
<feGaussianBlur stdDeviation="1" />
</filter>
<filter id="dropShadow2"
x="-20%" y="-20%"
width="150%" height="150%">
<feGaussianBlur stdDeviation="4" />
</filter>
<radialGradient id="gradSun">
<stop offset="80%" stop-color="yellow">
<animate attributeName="offset" values="80%;20%;80%" dur="6s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="gold" >
<animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" />
</stop>
</radialGradient>
<linearGradient id="gradEarth">
<stop offset="40%" stop-color="dodgerblue"></stop>
<stop offset="100%" stop-color="yellowgreen" ></stop>
</linearGradient>
</defs>
<!-- planet rotation animation -->
<g>
<animateTransform
attributeName="transform"
type="rotate"
values="360 250 175;0 250 175"
dur="12s"
repeatCount="indefinite"
/>
<circle class="Earth-orbit" cx="250" cy="175" r="90" />
<circle class="Earth" cx="160" cy="175" r="10" transform="rotate(45 250 175)" />
</g>
<circle class="sun" cx="250" cy="175" r="20" />
</svg>

Answer 4

First, You must set key frames then use css animation
#-webkit-keyframes rotated {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}}
#keyframes rotated {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}}
Then use animation in css
.bg-shape{
animation: rotated 35s linear infinite;}
Then in html use svg image to rotate
<div class="col-lg-4">
<div class="inner-wrapper text-center">
<div class="mb-3">
<img src="../img/svg/shape-37.svg" alt="" class="bg-shape">
</div>
</div>
</div>