blocks|key|2526081|text|您可以像下面这样旋转大圆圈：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2526082|​|2526083|.graph+{
++position:+relative;
++width:+500px;
++height:+500px;
}

svg+{
++position:+relative;
++border:+2px+solid+blue;
++width:+99%25;
++height:+99%25;
}

.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%25+{
++++transform:+rotateZ(0deg);
++}
++
++100%25+{
++++transform:+rotateZ(-360deg);
++}
}|code-block|syntax|javascript|2526084|<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>|2526085|2526086|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You can rotate the big circle instead like below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><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;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2314290|text|svg元素的中心不是行星的中心。您需要将transform-origin更改为345px+328px。为了计算新的中心，我对graph__middle使用了getBBox()方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2314291|​|2314292|.graph+{
++position:+relative;
++width:+500px;
++height:+500px;
}
.graph+svg+{
++position:+relative;
++border:+2px+solid+blue;
++width:+99%25;
++height:+99%25;
}
.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%25+{
++++transform:+rotateZ(0deg);
++}
++100%25+{
++++transform:+rotateZ(-360deg);
++}
}|code-block|syntax|javascript|2314293|<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>|2314294|2314295|entityMap^0|K|G|13|B|1Q|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|Q|$]]

<p>The center of the svg element is not the center of your planets. You will need to change the <code>transform-origin</code> to <code>345px 328px</code>. In order to calculate the new center I've used the getBBox() method for the <code>graph__middle</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><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" id="KK"&gt;
             &lt;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"/&gt;
          &lt;/g&gt;

           &lt;g class="graph__design" &gt;
              &lt;g class="graph_mainCircle"&gt;
                 &lt;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"/&gt;
              &lt;/g&gt;

              &lt;g class="graph__skills"&gt;
                 &lt;g class="graph__middle"&gt;
                    &lt;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"/&gt;
                  &lt;/g&gt;
             &lt;/g&gt;
          &lt;/g&gt;
        &lt;/g&gt;
       
       &lt;circle cx="345" cy="328" r="3" /&gt;
    &lt;/svg&gt;
&lt;/section&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2314332|text|SVG示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2314333|我的例子并没有完全回答你的问题，但我希望你能从我的回答中获得一些想法。|2314334|根据动画mercury-group的名称判断，您希望创建一个太阳系模型。|offset|length|style|CODE|2314335|我提出了行星围绕太阳旋转的动画的一个变体。|2314336|我把太阳系行星的旋转中心定位在太阳的中心，这个中心的坐标是x+="+250+"，y+="+175+"，y+="+175+"。|2314337|因此，行星围绕太阳旋转的动画团队具有以下形式：|2314338|<animateTransform+
++++++attributeName="transform"+
++++++type="rotate"
++++++values="0+250+175;360+250+175"+
++++++dur="12s"
++++++repeatCount="indefinite"
++/>++++++++|code-block|syntax|javascript|2314339|滤镜和渐变用于设计行星和太阳的外观。|2314340|太阳的波纹及其颜色变化的动画|2314341|<radialGradient+id="gradSun">
++++++++<stop+offset="80%25"+stop-color="yellow">
+++++++++<animate+attributeName="offset"+values="80%25;20%25;80%25"+dur="6s"+repeatCount="indefinite"+/>
+++++++++</stop>
++++++++<stop+offset="100%25"+stop-color="gold"+>
++++++++<animate+attributeName="stop-color"+values="gold;red;gold"+dur="6s"+repeatCount="indefinite"+/>
++++++++</stop>
++++++</radialGradient>+++|2314342|以下是行星围绕太阳旋转的完整动画代码：|2314343|​|2314344|.solar-system{
++background-color:#002;
++width:100%25;
++height:100%25;
}
.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);
+}|2314345|<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%25"+y="-20%25"+
		width="150%25"+height="150%25">
	<feGaussianBlur+++stdDeviation="1"+/>
+</filter>
++++<filter+id="dropShadow2"+
		x="-20%25"+y="-20%25"+
		width="150%25"+height="150%25">
		<feGaussianBlur+++stdDeviation="4"+/>
	</filter>
	+<radialGradient+id="gradSun">
++++++++<stop+offset="80%25"+stop-color="yellow">
		+<animate+attributeName="offset"+values="80%25;20%25;80%25"+dur="6s"+repeatCount="indefinite"+/>
		+</stop>
++++++++<stop+offset="100%25"+stop-color="gold"+>
		<animate+attributeName="stop-color"+values="gold;red;gold"+dur="6s"+repeatCount="indefinite"+/>
		</stop>
++++++</radialGradient>
+<linearGradient+id="gradEarth">
	<stop+offset="40%25"+stop-color="dodgerblue"></stop>
	<stop+offset="100%25"+stop-color="yellowgreen"+></stop>
+</linearGradient>	++
+</defs>	+
+
+++<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>|2314346|2314347|entityMap^0|0|0|4|D|0|0|T|A|14|A|1F|A|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1C|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1D|8|@$F|1E|G|1F|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1G|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1H|8|@$F|1I|G|1J|H|I]|$F|1K|G|1L|H|I]|$F|1M|G|1N|H|I]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1O|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1P|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1R|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|R|7|1S|8|@]|9|@]|A|$S|T]]|$1|10|3|11|5|6|7|1T|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1U|8|@]|9|@]|A|$]]|$1|14|3|15|5|R|7|1V|8|@]|9|@]|A|$S|T]]|$1|16|3|17|5|R|7|1W|8|@]|9|@]|A|$S|T]]|$1|18|3|13|5|6|7|1X|8|@]|9|@]|A|$]]|$1|19|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|1A|$]]

<h2>SVG example</h2>

<p>My example doesn't answer exactly your question but I hope you take some ideas from my answer.  </p>

<p>Judging by the names of the animation <code>mercury-group</code> you want to create a model of the solar system.<br>
I propose a variant of the animation of the rotation of the planet around the sun.  </p>

<p>I located the center of rotation of the planets of the solar system in the center of the sun which has coordinates <code>x =" 250 "</code> <code>y =" 175 "</code> center of the sun    </p>

<p>Therefore, the animation team of the rotation of the planet around the sun has the following form: </p>

<pre><code>&lt;animateTransform 
      attributeName="transform" 
      type="rotate"
      values="0 250 175;360 250 175" 
      dur="12s"
      repeatCount="indefinite"
  /&gt;        
</code></pre>

<p>Filters and gradients are used to design the appearance of the planet and the sun.   </p>

<p>Animation of the ripple of the sun and changing its color  </p>

<pre><code>&lt;radialGradient id="gradSun"&gt;
        &lt;stop offset="80%" stop-color="yellow"&gt;
         &lt;animate attributeName="offset" values="80%;20%;80%" dur="6s" repeatCount="indefinite" /&gt;
         &lt;/stop&gt;
        &lt;stop offset="100%" stop-color="gold" &gt;
        &lt;animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" /&gt;
        &lt;/stop&gt;
      &lt;/radialGradient&gt;   
</code></pre>

<p><em>Below is the full animation code for the rotation of the planet around the sun:</em>  </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="solar-system"&gt;
  &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 500 400" &gt; 
 &lt;defs&gt;
 &lt;filter id="dropShadow1" 
    x="-20%" y="-20%" 
		width="150%" height="150%"&gt;
	&lt;feGaussianBlur   stdDeviation="1" /&gt;
 &lt;/filter&gt;
    &lt;filter id="dropShadow2" 
		x="-20%" y="-20%" 
		width="150%" height="150%"&gt;
		&lt;feGaussianBlur   stdDeviation="4" /&gt;
	&lt;/filter&gt;
	 &lt;radialGradient id="gradSun"&gt;
        &lt;stop offset="80%" stop-color="yellow"&gt;
		 &lt;animate attributeName="offset" values="80%;20%;80%" dur="6s" repeatCount="indefinite" /&gt;
		 &lt;/stop&gt;
        &lt;stop offset="100%" stop-color="gold" &gt;
		&lt;animate attributeName="stop-color" values="gold;red;gold" dur="6s" repeatCount="indefinite" /&gt;
		&lt;/stop&gt;
      &lt;/radialGradient&gt;
 &lt;linearGradient id="gradEarth"&gt;
	&lt;stop offset="40%" stop-color="dodgerblue"&gt;&lt;/stop&gt;
	&lt;stop offset="100%" stop-color="yellowgreen" &gt;&lt;/stop&gt;
 &lt;/linearGradient&gt;	  
 &lt;/defs&gt;	 
 &lt;!-- planet rotation animation --&gt;
   &lt;g&gt;
  &lt;animateTransform 
	  attributeName="transform" 
	  type="rotate"
      values="360 250 175;0 250 175" 
	  dur="12s"
	  repeatCount="indefinite"
  /&gt;
 &lt;circle class="Earth-orbit" cx="250" cy="175" r="90"     /&gt;
 &lt;circle class="Earth" cx="160" cy="175" r="10" transform="rotate(45 250 175)"  /&gt;
&lt;/g&gt;
 &lt;circle class="sun" cx="250" cy="175" r="20"  /&gt; 
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2314362|text|首先，您必须设置关键帧，然后使用css动画|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2314363|@-webkit-keyframes+rotated+{
0%25+{
++++-webkit-transform:+rotate(0);
++++transform:+rotate(0);
}

100%25+{
++++-webkit-transform:+rotate(360deg);
++++transform:+rotate(360deg);
}}


@keyframes+rotated+{
0%25+{
++++-webkit-transform:+rotate(0);
++++transform:+rotate(0);
}

100%25+{
++++-webkit-transform:+rotate(360deg);
++++transform:+rotate(360deg);
}}|code-block|syntax|javascript|2314364|然后在css中使用动画|2314365|.bg-shape{
animation:+rotated+35s+linear+infinite;}|2314366|然后在html中使用svg图像进行旋转|2314367|<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>|2314368|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>First, You must set key frames then use css animation</p>

<pre><code>@-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);
}}
</code></pre>

<p>Then use animation in css</p>

<pre><code>.bg-shape{
animation: rotated 35s linear infinite;}
</code></pre>

<p>Then in html use svg image to rotate</p>

<pre><code>&lt;div class="col-lg-4"&gt;
                        &lt;div class="inner-wrapper text-center"&gt;
                            &lt;div class="mb-3"&gt;
                                &lt;img src="../img/svg/shape-37.svg" alt="" class="bg-shape"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
</code></pre>


<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>


SVG element rotate on circle

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

所以我有一个SVG元素--大圆圈--和一组元素。我想把这些元素绕着这个大圆圈旋转。代码非常简单，但是我已经搞不懂如何将这个圆(graph__skils)设置在正确的路径(大圆)上。正如你在下面的链接中看到的，这个小圆圈在大圆圈上的旋转不正确。请帮帮忙HTML文件<section class="graph"> <svg ...

问SVG元素在圆上旋转
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG元素在圆上旋转EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG元素在圆上旋转
EN