SVG元素绕圆旋转 [英] SVG element rotate on circle

问题描述

所以我有一个SVG元素-大圆圈-里面有一组元素。

So I have a SVG element - big circle - and group of elements inside .

我想围绕这个大圆圈旋转这些元素。代码非常简单，但是我已经迷失了如何在正确的路径（大圆圈）上设置此圆圈（graph__skils）。正如您在下面的链接中看到的那样，小圆圈在大圆圈上旋转不正确。请帮助

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

圈旋转jsfiddle

HTML文件

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

.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);
  }
}

推荐答案

svg元素的中心不是行星的中心。您需要将 transform-origin 更改为 345px 328px 。为了计算新的中心，我对 graph__middle

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>

这篇关于SVG元素绕圆旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！