SVG 元素在圓上旋轉

Question

所以我有一個 SVG 元素——大圓圈——和里面的一組元素。

我想圍繞這個大圓圈旋轉這些元素。 代碼非常簡單，但我已經對如何在正確的路徑（大圓）上設置這個圓（graph__skils）感到害怕了。 正如您在下面的鏈接中看到的，這個小圓圈在大圓圈上旋轉不正確。 請幫忙

圓形旋轉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>

文件

.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

您可以像下面這樣旋轉大圓圈：

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

svg 元素的中心不是行星的中心。 您需要將transform-origin更改為345px 328px 。 為了計算新的中心，我對 graph__middle 使用了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 3

SVG 示例

我的例子並沒有完全回答你的問題，但我希望你能從我的回答中得到一些想法。

從動畫mercury-group的名稱來看，您想要創建一個太陽系模型。
我提出了行星圍繞太陽旋轉的動畫變體。

我將太陽系行星的旋轉中心定位在太陽的中心，其坐標為x =" 250 " y =" 175 " center of the sun

因此，行星繞太陽旋轉的動畫組有如下形式：

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

過濾器和漸變用於設計行星和太陽的外觀。

太陽波紋的動畫和改變它的顏色

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

下面是行星繞太陽旋轉的完整動畫代碼：

 .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

首先，你必須設置關鍵幀然后使用css動畫

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

然后在css中使用動畫

.bg-shape{
animation: rotated 35s linear infinite;}

然后在html中使用svg圖像旋轉

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