主页 / 问题 / 918237
Accepted
Alexandr_TT
Asked:2020-12-11 04:14:05 +0000 UTC2020-12-11 04:14:05 +0000 UTC

太阳系行星动画

  • 772

我有一张太阳系中行星的照片。

在此处输入图像描述

<circle>事实证明，这是在轨道和行星本身的命令的帮助下完成的。
使用线性和径向渐变来增加音量。
我发现了一个实现一个行星绕太阳旋转的 话题

.solar-system {
  background-color: #002;
  width: 50%;
  height: 50%;
}

.sun {
  fill: yellow;
  filter: url(#dropShadow);
}

.mercury-orbit {
  stroke: rgba(255, 255, 255, .4);
  stroke-width: 1;
  fill: none;
}

.mercury {
  fill: crimson;
  filter: url(#dropShadow2);
}
<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="dropShadow"	
      x="-20%" y="-20%" 
      width="150%" height="150%">
      <feGaussianBlur stdDeviation="5" />
    </filter>
    <filter 
      id="dropShadow2" 
      x="-20%" y="-20%" 
      width="120%" height="120%">
      <feGaussianBlur stdDeviation="2" />
    </filter>
  </defs>
  
  <circle class="sun" cx="250" cy="175" r="25" /> 
  <g>
    <animateTransform 
      attributeName="transform" 
      type="rotate" 
      values="0 250 175;360 250 175" 
      dur="12s"
      repeatCount="indefinite" />
    <circle class="mercury-orbit" cx="250" cy="175" r="65" />
    <circle class="mercury" cx="185" cy="175" r="6" />
  </g>
  
</div>

但是，当您尝试为几个行星制作动画时，一切都会中断。只有最后添加的行星是可见的。如何为多个行星制作动画？

css

1 个回答

  1. Best Answer
    • 渐变和过滤器用于创建旋转对象并赋予它们体积。feGaussianBlur

    .solar-system{
  background-color:#002;
  width:100%;
  height:100%;
}
.sun{
  
  fill:url(#gradSun);
  filter:url(#dropShadow2);
  }
    <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="dropShadow2" 
          x="-20%" y="-20%" 
        width="150%" height="150%">
        <feGaussianBlur   stdDeviation="4" />
     </filter>
      <radialGradient id="gradSun">
        <stop offset="80%" stop-color="yellow"></stop>
        <stop offset="100%" stop-color="gold" ></stop>
    </radialGradient>
 </defs>     
 <circle class="sun" cx="250" cy="175" r="20"  />
 
 </svg>

    2018 年 12 月 11 日更新——
    • 太阳波纹动画
    1. 要调整大小Звезды по имени Солнце @Виктор Цой， - 为半径设置动画
      <circle class="sun">
    2. 要更改活动太阳的颜色，渐变属性是动画的
      <radialGradient id="gradSun">

    .solar-system{
  background-color:#002;
  width:100%;
  height:100%;
}
.sun{
  
  fill:url(#gradSun);
  filter:url(#dropShadow2);
  
 }
     <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="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>
 </defs>     
 <circle class="sun" cx="250" cy="175" r="18"  >
 <animate attributeName="r" values="18;18;22;22;22;18" dur="6s" repeatCount="indefinite" />
  </circle>
 
 </svg>

    • 一颗行星围绕太阳旋转的动画

    所有物体，因此在运动轨迹中没有不匹配，具有相同的旋转中心 X = 275px，Y = 175px

    .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>     
 <!-- Earth -->
   <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      values="0 250 175;360 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>

    对于每个行星，创建单独的渐变和动画命令，如上例所示。
    下面是完整的代码

    开始动画 - 按钮Start

    .solar-system{
  background-color:#002;
  width:100%;
  height:100%;
 
}
.sun{
  
  fill:url(#gradSun);
  filter:url(#dropShadow2);
  
 }
.mercury-orbit{
  stroke:  rgba(255,255,255,.4);
  stroke-width:1;
  fill:none;
  }
.mercury{
   fill:url(#gradMercury);
   filter:url(#dropShadow1);
 }
 .venus-orbit{
  stroke:rgba(255,255,255,.4);
  stroke-width:1;
  fill:none;
  }
.venus{
   fill:url(#gradVenus);
   filter:url(#dropShadow1);
   
 }
 
 .Earth-orbit{
  stroke:rgba(255,255,255,.4);
    stroke-width:1;
  fill:none;
  }
.Earth{
   filter:url(#dropShadow1);
   fill:url(#gradEarth);
 }
 .Mars-orbit{
  stroke:rgba(255,255,255,.4);
    stroke-width:1;
  fill:none;
  }
.Mars{
   filter:url(#dropShadow1);
   fill:url(#gradMars);
 } 
 
 .Jupiter-orbit{
  stroke:rgba(255,255,255,.4);
    stroke-width:1;
  fill:none;
  }
.Jupiter{
   filter:url(#dropShadow1);
   fill:url(#gradJupiter);
 }
    <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"></stop>
        <stop offset="100%" stop-color="gold" ></stop>
    </radialGradient>
        <linearGradient id="gradEarth">
            <stop offset="40%" stop-color="dodgerblue"></stop>
            <stop offset="100%" stop-color="yellowgreen" ></stop>
        </linearGradient>
    <linearGradient id="gradMercury"> 
        <stop offset="20%" stop-color="#824549"></stop>
      <stop offset="20%" stop-color="#956356"></stop>  
      <stop offset="80%" stop-color="#5F3631" ></stop>
          <stop offset="100%" stop-color="#807019" ></stop>
    </linearGradient>
    
      <linearGradient id="gradVenus">
        <stop offset="40%" stop-color="#805050"></stop>
        <stop offset="100%" stop-color="yellow" ></stop>
      </linearGradient>
      
        <linearGradient id="gradMars">
        <stop offset="40%" stop-color="crimson"></stop>
        <stop offset="100%" stop-color="yellow" ></stop>
      </linearGradient>  
    
     <linearGradient id="gradJupiter">
    <stop offset="10%" stop-color="#AE5D49"></stop>
    <stop offset="10%" stop-color="#783632" ></stop>
        <stop offset="20%" stop-color="#C58460" ></stop>
        <stop offset="20%" stop-color="#866D65" ></stop>
        <stop offset="30%" stop-color="#995645" ></stop>
        <stop offset="30%" stop-color="#C58460" ></stop>
        <stop offset="40%" stop-color="#AE5D49" ></stop>
        <stop offset="40%" stop-color="#C58460" ></stop>
        <stop offset="50%" stop-color="#AE5D49"></stop>
    <stop offset="50%" stop-color="#783632" ></stop>
        <stop offset="60%" stop-color="#C58460" ></stop>
        <stop offset="60%" stop-color="#866D65" ></stop> 
        <stop offset="70%" stop-color="#995645" ></stop>
        <stop offset="70%" stop-color="#C58460" ></stop>
        <stop offset="80%" stop-color="#AE5D49" ></stop>
        <stop offset="80%" stop-color="#943A31" ></stop>
        
    </linearGradient>  
    
      
  </defs>
 <g id="btn1">
     <circle  cx="30" cy="45" r="8" fill="url(#gradEarth)" filter="url(#dropShadow1)" /> 
     <text id="txt1" x="15" y="70" font-size="1rem" fill="gold" >Start</text>
 </g>
 <!-- mercury -->
  <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"      
      values="0 250 175;360 250 175" 
      dur="8s"
      repeatCount="indefinite"
  />
 <circle class="mercury-orbit" cx="250" cy="175" r="40"   />
 <circle class="mercury" cx="210" cy="175" r="6"  />
</g> 
   <!-- venus -->
   <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"
      values="0 250 175;360 250 175" 
      dur="10s"
      repeatCount="indefinite"
  />
 <circle class="venus-orbit" cx="250" cy="175" r="60"     />
 <circle class="venus" transform="rotate(-45 250 175)" cx="190" cy="175" r="10"   />
</g> 
 <!-- Earth -->
   <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"      
      values="0 250 175;360 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>
    <!-- Mars -->
  <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"      
      values="0 250 175;360 250 175" 
      dur="14s"
      repeatCount="indefinite"
  />
 <circle class="Mars-orbit" cx="250" cy="175" r="120"     />
 <circle class="Mars" cx="130" cy="175" r="8" transform="rotate(90 250 175)"  />
</g>  
    <!-- Jupiter -->
    <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate" 
      begin="btn1.click"
      values="0 250 175;360 250 175" 
      dur="16s"
      repeatCount="indefinite"
  />
 <circle class="Jupiter-orbit" cx="250" cy="175" r="180"     />
 <circle class="Jupiter " cx="70" cy="175" r="20" transform="rotate(180 250 175)"  />
</g>
     <circle class="sun" cx="250" cy="175" r="20"  /> 
    
</div>
<audio src="https://svg-art.ru/files/zodiac.mp3" autoplay="autoplay"></audio>

    太阳活动动画的变体

    .solar-system{
  background-color:#002;
  width:100%;
  height:100%;
 
}
.sun{
  
  fill:url(#gradSun);
  filter:url(#dropShadow2);
  
 }
.mercury-orbit{
  stroke:  rgba(255,255,255,.4);
  stroke-width:1;
  fill:none;
  }
.mercury{
   fill:url(#gradMercury);
   filter:url(#dropShadow1);
 }
 .venus-orbit{
  stroke:rgba(255,255,255,.4);
  stroke-width:1;
  fill:none;
  }
.venus{
   fill:url(#gradVenus);
   filter:url(#dropShadow1);
   
 }
 
 .Earth-orbit{
  stroke:rgba(255,255,255,.4);
    stroke-width:1;
  fill:none;
  }
.Earth{
   filter:url(#dropShadow1);
   fill:url(#gradEarth);
 }
 .Mars-orbit{
  stroke:rgba(255,255,255,.4);
    stroke-width:1;
  fill:none;
  }
.Mars{
   filter:url(#dropShadow1);
   fill:url(#gradMars);
 } 
 
 .Jupiter-orbit{
  stroke:rgba(255,255,255,.4);
    stroke-width:1;
  fill:none;
  }
.Jupiter{
   filter:url(#dropShadow1);
   fill:url(#gradJupiter);
 }
    <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="12s" 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>
    <linearGradient id="gradMercury"> 
        <stop offset="20%" stop-color="#824549"></stop>
        <stop offset="20%" stop-color="#956356"></stop>  
        <stop offset="80%" stop-color="#5F3631" ></stop>
        <stop offset="100%" stop-color="#807019" ></stop>
    </linearGradient>
      <linearGradient id="gradVenus">
        <stop offset="40%" stop-color="#805050"></stop>
        <stop offset="100%" stop-color="yellow" ></stop>
      </linearGradient>
      
        <linearGradient id="gradMars">
        <stop offset="40%" stop-color="crimson"></stop>
        <stop offset="100%" stop-color="yellow" ></stop>
    </linearGradient>  
        <linearGradient id="gradJupiter">
        <stop offset="10%" stop-color="#AE5D49"></stop>
        <stop offset="10%" stop-color="#783632" ></stop>
        <stop offset="20%" stop-color="#C58460" ></stop>
        <stop offset="20%" stop-color="#866D65" ></stop>
        <stop offset="30%" stop-color="#995645" ></stop>
        <stop offset="30%" stop-color="#C58460" ></stop>
        <stop offset="40%" stop-color="#AE5D49" ></stop>
        <stop offset="40%" stop-color="#C58460" ></stop>
        <stop offset="50%" stop-color="#AE5D49"></stop>
        <stop offset="50%" stop-color="#783632" ></stop>
        <stop offset="60%" stop-color="#C58460" ></stop>
        <stop offset="60%" stop-color="#866D65" ></stop> 
        <stop offset="70%" stop-color="#995645" ></stop>
        <stop offset="70%" stop-color="#C58460" ></stop>
        <stop offset="80%" stop-color="#AE5D49" ></stop>
        <stop offset="80%" stop-color="#943A31" ></stop>
        
    </linearGradient>  
    
      
  </defs>
 <g id="btn1">
     <circle  cx="30" cy="45" r="8" fill="url(#gradEarth)" filter="url(#dropShadow1)" /> 
     <text id="txt1" x="15" y="70" font-size="1rem" fill="gold" >Start</text>
 </g>
 <!-- mercury -->
  <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"      
      values="0 250 175;360 250 175" 
      dur="8s"
      repeatCount="indefinite"
  />
 <circle class="mercury-orbit" cx="250" cy="175" r="40"   />
 <circle class="mercury" cx="210" cy="175" r="6"  />
</g> 
   <!-- venus -->
   <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"
      values="0 250 175;360 250 175" 
      dur="10s"
      repeatCount="indefinite"
  />
 <circle class="venus-orbit" cx="250" cy="175" r="60"     />
 <circle class="venus" transform="rotate(-45 250 175)" cx="190" cy="175" r="10"   />
</g> 
 <!-- Earth -->
   <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"      
      values="0 250 175;360 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>
    <!-- Mars -->
  <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"      
      values="0 250 175;360 250 175" 
      dur="14s"
      repeatCount="indefinite"
  />
 <circle class="Mars-orbit" cx="250" cy="175" r="120"     />
 <circle class="Mars" cx="130" cy="175" r="8" transform="rotate(90 250 175)"  />
</g>  
    <!-- Jupiter -->
    <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate" 
      begin="btn1.click"
      values="0 250 175;360 250 175" 
      dur="16s"
      repeatCount="indefinite"
  />
 <circle class="Jupiter-orbit" cx="250" cy="175" r="180"     />
 <circle class="Jupiter " cx="70" cy="175" r="20" transform="rotate(180 250 175)"  />
</g>
  <circle class="sun" cx="250" cy="175" r="18"  >
     <animate attributeName="r" values="18;18;22;22;22;18" dur="12s" repeatCount="indefinite" />
  </circle>
    
</div>
<audio src="https://svg-art.ru/files/zodiac.mp3" autoplay="autoplay"></audio>

    2019 年 4 月 18 日更新

    由于现代浏览器出于安全原因禁止自动启动 *.mp3 文件，因此我不得不在按下“开始”按钮时添加一个小的音乐启动脚本

    动画运行时，生肖群的轨迹响起。

    .solar-system{
  background-color:#002;
  width:100%;
  height:100%;
 
}
.sun{
  
  fill:url(#gradSun);
  filter:url(#dropShadow2);
  
 }
.mercury-orbit{
  stroke:  rgba(255,255,255,.4);
  stroke-width:1;
  fill:none;
  }
.mercury{
   fill:url(#gradMercury);
   filter:url(#dropShadow1);
 }
 .venus-orbit{
  stroke:rgba(255,255,255,.4);
  stroke-width:1;
  fill:none;
  }
.venus{
   fill:url(#gradVenus);
   filter:url(#dropShadow1);
   
 }
 
 .Earth-orbit{
  stroke:rgba(255,255,255,.4);
    stroke-width:1;
  fill:none;
  }
.Earth{
   filter:url(#dropShadow1);
   fill:url(#gradEarth);
 }
 .Mars-orbit{
  stroke:rgba(255,255,255,.4);
    stroke-width:1;
  fill:none;
  }
.Mars{
   filter:url(#dropShadow1);
   fill:url(#gradMars);
 } 
 
 .Jupiter-orbit{
  stroke:rgba(255,255,255,.4);
    stroke-width:1;
  fill:none;
  }
.Jupiter{
   filter:url(#dropShadow1);
   fill:url(#gradJupiter);
 }
    <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="12s" 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>
    <linearGradient id="gradMercury"> 
        <stop offset="20%" stop-color="#824549"></stop>
        <stop offset="20%" stop-color="#956356"></stop>  
        <stop offset="80%" stop-color="#5F3631" ></stop>
        <stop offset="100%" stop-color="#807019" ></stop>
    </linearGradient>
      <linearGradient id="gradVenus">
        <stop offset="40%" stop-color="#805050"></stop>
        <stop offset="100%" stop-color="yellow" ></stop>
      </linearGradient>
      
        <linearGradient id="gradMars">
        <stop offset="40%" stop-color="crimson"></stop>
        <stop offset="100%" stop-color="yellow" ></stop>
    </linearGradient>  
        <linearGradient id="gradJupiter">
        <stop offset="10%" stop-color="#AE5D49"></stop>
        <stop offset="10%" stop-color="#783632" ></stop>
        <stop offset="20%" stop-color="#C58460" ></stop>
        <stop offset="20%" stop-color="#866D65" ></stop>
        <stop offset="30%" stop-color="#995645" ></stop>
        <stop offset="30%" stop-color="#C58460" ></stop>
        <stop offset="40%" stop-color="#AE5D49" ></stop>
        <stop offset="40%" stop-color="#C58460" ></stop>
        <stop offset="50%" stop-color="#AE5D49"></stop>
        <stop offset="50%" stop-color="#783632" ></stop>
        <stop offset="60%" stop-color="#C58460" ></stop>
        <stop offset="60%" stop-color="#866D65" ></stop> 
        <stop offset="70%" stop-color="#995645" ></stop>
        <stop offset="70%" stop-color="#C58460" ></stop>
        <stop offset="80%" stop-color="#AE5D49" ></stop>
        <stop offset="80%" stop-color="#943A31" ></stop>
        
    </linearGradient>  

      
  </defs>
 
 <g id="btn1" onclick='play()' >
     <circle  cx="30" cy="45" r="8" fill="url(#gradEarth)" filter="url(#dropShadow1)" /> 
     <text id="txt1" x="15" y="70" font-size="1rem" fill="gold" >Start</text>
 </g>
 <!-- mercury -->
  <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"      
      values="0 250 175;360 250 175" 
      dur="8s"
      repeatCount="indefinite"
  />
 <circle class="mercury-orbit" cx="250" cy="175" r="40"   />
 <circle class="mercury" cx="210" cy="175" r="6"  />
</g> 
   <!-- venus -->
   <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"
      values="0 250 175;360 250 175" 
      dur="10s"
      repeatCount="indefinite"
  />
 <circle class="venus-orbit" cx="250" cy="175" r="60"     />
 <circle class="venus" transform="rotate(-45 250 175)" cx="190" cy="175" r="10"   />
</g> 
 <!-- Earth -->
   <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"      
      values="0 250 175;360 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>
    <!-- Mars -->
  <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate"
      begin="btn1.click"      
      values="0 250 175;360 250 175" 
      dur="14s"
      repeatCount="indefinite"
  />
 <circle class="Mars-orbit" cx="250" cy="175" r="120"     />
 <circle class="Mars" cx="130" cy="175" r="8" transform="rotate(90 250 175)"  />
</g>  
    <!-- Jupiter -->
    <g>
  <animateTransform 
      attributeName="transform" 
      type="rotate" 
      begin="btn1.click"
      values="0 250 175;360 250 175" 
      dur="16s"
      repeatCount="indefinite"
  />
 <circle class="Jupiter-orbit" cx="250" cy="175" r="180"     />
 <circle class="Jupiter " cx="70" cy="175" r="20" transform="rotate(180 250 175)"  />
</g>
  <circle class="sun" cx="250" cy="175" r="18"  >
     <animate attributeName="r" values="18;18;22;22;22;18" dur="12s" repeatCount="indefinite" />
  </circle>
    
</div> 



<script>
var zodiac = new Audio();
zodiac.src = 'https://svg-art.ru/files/zodiac.mp3';

function play() {
  zodiac.play();
}
</script>

    • 19

相关问题