2

Как сделать анимацию SMIL SVG Колеса обозрения, основываясь на растровом изображении

введите сюда описание изображения

Я не нашел готового векторного изображения, поэтому нарисовал колесо обозрения в векторном редакторе.

Трудность в реализации анимации возникла при совмещении двух анимаций:

  1. Вращения всего колеса в целом и
  2. вращения корзин вокруг точки подвеса, таким образом, чтобы дно корзины было всегда горизонтально.

Но у меня получилось только так:

введите сюда описание изображения

Как добиться синхронности двух анимаций вращения, чтобы дно корзины было всегда горизонтально?

2 ответа 2

2

CSS вариант решения

html, body {
  height: 100%;
}

body {
  background: -webkit-linear-gradient(left, #1fa2ff, #12d8fa, #a6ffcb);
  background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
}

.ferris_wheel ,.wheel {
  border: 6px solid #fff;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.ferris_wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1.4, 1.4);
          transform: translateX(-50%) translateY(-50%) scale(1.4, 1.4);
  border: 0;
}

.wheel_wrap {
  position: absolute;
  -webkit-animation: wheel_rotate 40s infinite linear;
          animation: wheel_rotate 40s infinite linear;
}

.wheel:before {
  content: "";
  height: 50px;
  width: 50px;
  background: #888;
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
  z-index: 1;
}

.wheel:after {
  content: "";
  width: 16px;
  height: 16px;
  background: #683C10;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
  border-radius: 50%;
  border: 4px solid #F3AE34;
  z-index: 1;
}

.wheel span:nth-child(1):before {
  content: "";
  border-bottom: 2px solid #BABCBA;
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  top: 50%;
  left: 6px;
}

.wheel span:nth-child(1):after {
  content: "";
  border-right: 2px solid #BABCBA;
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  top: 6px;
  left: 50%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.wheel span:nth-child(2):before {
  content: "";
  border-right: 2px solid #BABCBA;
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  top: 5px;
  left: 50%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.wheel span:nth-child(2):after {
  content: "";
  border-right: 2px solid #BABCBA;
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  top: 6px;
  left: 50%;
}

div.stand:before,
div.stand:after {
  content: "";
  position: absolute;
  border-right: 4px solid #F3AE34;
  height: 120px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  top: 88px;
  left: 50%;
  margin-left: -15px;
}

div.stand:after {
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  margin-left: 23px;
}

.stand span {
  position: absolute;
  height: 10px;
  background: #683C10;
  width: 100px;
  bottom: -60px;
  left: 50%;
  margin-left: -44px;
  z-index: 1;
}


@-webkit-keyframes wheel_rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


@keyframes wheel_rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


.buckets {
  position: absolute;
  border: 6px solid #fff;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  z-index: 1;
}

.buckets div {
  position: absolute;
  -webkit-animation: bucket_rotate 40s infinite linear;
          animation: bucket_rotate 40s infinite linear;
  top: 50%;
  left: 50%;
  margin-top: 11px;
  margin-left: -13px;
}

.buckets div:before {
  content: "";
  height: 13px;
  left: 9px;
  border-right: 1px solid #888;
  position: absolute;
  top: -12px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.buckets div:after {
  content: "";
  height: 13px;
  border-right: 1px solid #888;
  position: absolute;
  right: 10px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  top: -12px;
}

.buckets span {
  display: inline-block;
  border-top: 15px solid #A84172;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  height: 0;
  width: 20px;
  position: relative;
}

.buckets span:before {
  content: "";
  position: absolute;
  top: -15px;
  height: 3px;
  width: 25px;
  left: -2px;
  background: #652382;
}

.buckets span:after {
  content: "";
  height: 5px;
  left: -2px;
  background: -webkit-linear-gradient(left,  #97cde6 0%,#97cde6 35%,#fff 35%,#fff 66%,#97cde6 66%,#97cde6 100%);
  background: linear-gradient(to right,  #97cde6 0%,#97cde6 35%,#fff 35%,#fff 66%,#97cde6 66%,#97cde6 100%);
  width: 25px;
  position: absolute;
  top: -12px;
}

@-webkit-keyframes bucket_rotate {
  0% { 
    -webkit-transform: rotate(0) translateX(75px) rotate(0); 
            transform: rotate(0) translateX(75px) rotate(0); 
  }
  100% { 
    -webkit-transform: rotate(360deg) translateX(75px) rotate(-360deg); 
            transform: rotate(360deg) translateX(75px) rotate(-360deg); 
  }
}

@keyframes bucket_rotate {
  0% { 
    -webkit-transform: rotate(0) translateX(75px) rotate(0); 
            transform: rotate(0) translateX(75px) rotate(0); 
  }
  100% { 
    -webkit-transform: rotate(360deg) translateX(75px) rotate(-360deg); 
            transform: rotate(360deg) translateX(75px) rotate(-360deg); 
  }
}

.buckets div:nth-child(2) {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
}

.buckets div:nth-child(3) {
  -webkit-animation-delay: -9.9s;
          animation-delay: -9.9s;
}

.buckets div:nth-child(4) {
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
}

.buckets div:nth-child(5) {
  -webkit-animation-delay: -20s;
          animation-delay: -20s;
}

.buckets div:nth-child(6) {
  -webkit-animation-delay: -25s;
          animation-delay: -25s;
}

.buckets div:nth-child(7) {
  -webkit-animation-delay: -30s;
          animation-delay: -30s;
}

.buckets div:nth-child(8) {
  -webkit-animation-delay: -35s;
          animation-delay: -35s;
}
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <div class="ferris_wheel">
  <div class="wheel_wrap">
    <div class="wheel">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="buckets">
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
  </div>
  <div class="stand"><span></span></div>
</div>

Источник

2

Все элементы анимации колеса объединены в группу <g id="wheel"> и вращаются командой анимации

 <!-- Анимация вращения колеса обозрения -->
 <animateTransform id="an_BigHat" xlink:href="#wheel" attributeName="transform" 
   type="rotate" begin="0s" dur="48s" values="0 142 135;360 142 135" repeatCount="1"  />   

Получается, как на нижнем изображении в вопросе.

Чтобы заставить вращаться корзины вокруг точки подвеса, добавляется вторая анимация вращения:

  <!-- Копии клонов одной корзины -->
 <use xlink:href="#basket"  > 
   <animateTransform id="an_B1" attributeName="transform" type="rotate" begin="0s" dur="48s"
    values="0 136.4 29;-360 136.4 29" repeatCount="1" fill="freeze" />  
</use> 

для синхронизации двух анимаций добавляется: additive="sum"

sum
Указывает, что анимация добавляется к базовому значению атрибута и других анимаций с меньшим приоритетом.

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="548" height="664" viewBox="0 0 274 332" preserveAspectRatio="xMinYMin meet" version="1.1">
<defs>
        
        <!-- Корзина -->
<g id="basket" >   
    
     <!-- Человек слева в корзине -->
  <g fill="red" stroke="white" stroke-width="0.5">
    <path d="m125 49.2c0.7 0 1.6 0.5 1.7 1.2 0.1 0.8-0.6 1.9-1.4 1.9-0.9 0.1-1.9-1-1.8-1.9 0-0.7 0.9-1.2 1.6-1.2z" /> 
    <path d="m124.1 52.2-0.1 1.1-1.2 0.6-0.1 1.4h4.2v-1.5l-1.4-0.6V52.4Z" /> 
  </g>  

               <!-- Человек справа в корзине -->
  <g fill="blue" stroke="white" stroke-width="0.5">
     <path d="m149 49.2c0.7 0 1.6 0.5 1.7 1.2 0.1 0.8-0.6 1.9-1.4 1.9-0.9 0.1-1.9-1-1.8-1.9 0-0.7 0.9-1.2 1.6-1.2z" />   
    <path d="m148.1 52.2-0.1 1.1-1.2 0.6-0.1 1.4h4.2v-1.5l-1.4-0.6V52.4Z" />
  </g>
  <path fill="none" stroke="#7C9093" d="m126.3 45.8 9-16.7 9.7 16.7" />
  
  <path fill="none" stroke="#652382" stroke-width="0.5" d="m118.1 44.8 3.5 20.4h28.4l5-20.6z"/>
  <path fill="#652382" d="m118.1 44.8 0.4 2.7h35.6l0.9-3zM119.7 55.2"/>
  <path fill="#A84172" d="m119.7 55.2h32.7l-2.5 9.9-28.4 0z" />
  <path fill="white" d="m131.9 47.5h11.2v7.7h-11.1z" />
         <!-- Окружность точки крепления корзины     -->
  <circle cx="136.45" cy="29" r="4" fill="#d2d2d2" opacity="1" />  
</g>  
 
 <g id="Man" transform="translate(0,0) scale(1,-1)">
    <path   fill="none">
         <animate
          attributeName="d"
          begin="0.1s"
          dur="0.3s"
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path> 
</g>   
          <!-- Трассы движения фигурок к карусели  -->
    <path id="inTrace" stroke="red" fill="none" d="m-20.4 321.1c1.4 0 22-2.2 32.7-4.9 30.1-7.7 87.4-32.1 87.4-32.1 12.3-1.3 27.6 4.4 36.8-3.8 2.8-2.5 2.5-10.9 2.5-10.9" />  
 <path id="outTrace" stroke="blue" fill="none" d="m158.4 269.7c0 0 0.9 7.9-1.6 10.4-11 10.7-45.7 6.1-45.7 6.1l-24.7 2.1-52.2 26c0 0-12.2 8.1-19 10.4-11 3.7-34.5 5.2-34.5 5.2" />
 </defs> 
  <rect width="100%" height="100%" fill="#2BDEF2" />
         <!-- Серый круг -->
  <circle cx="142" cy="132" r="35" fill="#888888" stroke="#888" stroke-width="10" opacity="1" />     
    
   <!-- Кольцо опоры -->
   <circle cx="142" cy="132" r="16" fill="none" stroke="#F3AE34" stroke-width="5"  opacity="1"/>
     
              <!-- Опора -->
  <path id="pillar" fill="none" stroke="#F3AE34" stroke-width="5" d="M96 300.2 137.3 147h5.5 4.5l42.3 154.2M72.1 300.7l139.8-1 0.2 14.4-140-0.5" />
          <!-- Центральный круг     -->
    <circle cx="142" cy="132" r="14" fill="#683C10" />      
                <!-- Основание -->
 <path fill="#683C10" stroke="#683C10" stroke-width="4" d="m72.1 300.7 139.8-1 0.2 14.4-140-0.5z" />
            <!-- Ограда     -->
    <polyline id="rack" stroke="#888" stroke-width="1" points="38,310 38,293" /> 
    
      <polyline  stroke="#683C10" stroke-width="2" points="104,265 182,265" />    
    <use href="#rack" x="-20" y="5" /> 
    <use href="#rack" x="-10" y="2" />  
     <use href="#rack" x="10" y="-5" /> 
      <use href="#rack" x="20" y="-9" />
       <use href="#rack"  x="30" y="-14" /> 
        <use href="#rack"  x="40" y="-19" />
         <use href="#rack"  x="50" y="-22" /> 
          <use href="#rack"  x="60" y="-27" /> 
         <use href="#rack"  x="70" y="-27" /> 
        <use href="#rack"  x="80" y="-27" /> 
       <use href="#rack"  x="90" y="-27" /> 
      <use href="#rack"  x="100" y="-27" />    
     <use href="#rack"  x="110" y="-27" /> 
    <use href="#rack"  x="120" y="-27" />  
   <use href="#rack"  x="130" y="-27" /> 
  <use href="#rack"  x="140" y="-27" />   
    <polyline  stroke="#683C10" stroke-width="2" points="14,300 104,265" />  
<g id="wheel"> 
 <!-- Большой круг -->
    <circle cx="142" cy="135" r="108" fill="none" stroke="white" stroke-width="8" opacity="1"/>
      
      <!-- Спицы к корзинам -->
  <g fill="none" stroke="#888" >
      <path  d="m 135,31 6,70" />   
       <path  d="M 213.12712,54.864406 165.29661,112" />
        <path  d="m 247.94492,129 -72,8" /> 
         <path  d="M 222,206.55508 170,160" />
          <path  d="m 147,243.02119 -3.16526,-70" />
           <path  d="M 70,213.12712 116.76271,160" />
            <path  d="m 40,139.5 73.152543,-3.51695" />
             <path  d="m 61.54661,63.305084 53.45763,47.830506" />
  </g>  
     <!-- Копии клонов одной корзины -->
 <use xlink:href="#basket"  > 
   <animateTransform id="an_B1" attributeName="transform" type="rotate" begin="0s" dur="48s"
    values="0 136.4 29;-360 136.4 29" repeatCount="1" fill="freeze" />  
</use> 
 <use xlink:href="#basket" transform="rotate(45 142 135)" >
    <animateTransform id="an_B2" attributeName="transform" type="rotate" begin="0s" dur="48s"
    values="-45 136.4 29;-405 136.4 29" repeatCount="1" additive="sum" fill="freeze" />  
</use>  
 <use xlink:href="#basket" transform="rotate(90 142 135)" >
   <animateTransform id="an_B3" attributeName="transform" type="rotate" begin="0s" dur="48s"
    values="-90 136.4 29;-450 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
</use>   
    <use xlink:href="#basket" transform="rotate(135 142 135)" >
      <animateTransform id="an_B4" attributeName="transform" type="rotate" begin="0s" dur="48s"
       values="-135 136.4 29;-495 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
    </use>      
  <use xlink:href="#basket" transform="rotate(180 142 135)" >
      <animateTransform id="an_B5" attributeName="transform" type="rotate" begin="0s" dur="48s"
       values="-180 136.4 29;-540 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
  </use>  
 <use xlink:href="#basket" transform="rotate(225 142 135)" > 
   <animateTransform id="an_B6" attributeName="transform" type="rotate" begin="0s" dur="48s"
       values="-225 136.4 29;-585 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
 </use>   
 <use xlink:href="#basket" transform="rotate(270 142 135)" > 
    <animateTransform id="an_B7" attributeName="transform" type="rotate" begin="0s" dur="48s"
       values="-270 136.4 29;-630 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
 </use>    
 
  <use xlink:href="#basket" transform="rotate(315 142 135)" > 
    <animateTransform id="an_B7" attributeName="transform" type="rotate" begin="0s" dur="48s"
       values="-315 136.4 29;-675 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
 </use>   
  
</g>   
      <!-- Анимация вращения колеса обозрения -->
 <animateTransform id="an_BigHat" xlink:href="#wheel" attributeName="transform" type="rotate" begin="0s" dur="48s" values="0 142 135;360 142 135" repeatCount="1"  />   
       <!-- Помост -->
<g fill="grey" stroke="#683C10" >
<path d="m106.6 280.3 94.3 0-10.4 8H93.5Z" class="s0"/>
  <path d="M12.9 314.3 104.8 280.3 93.5 288.2 34.2 314.3Z" class="s0"/>
 </g>   
 
 
          <!-- Анимация движения пассажиров  -->
 <use xlink:href="#Man" transform="translate(0,0) scale(1)" style="stroke:blue; fill:black;"> 
     <animateMotion id="an1"
       begin="0s"
       dur="6s"
       repeatCount="7"  >
          <mpath xlink:href="#outTrace"/>
     </animateMotion> 
 </use>    
    <use xlink:href="#Man" transform="translate(0,0) scale(1)" style="stroke:red; fill:black;"> 
     <animateMotion id="an2"
       begin="0.2s"
       dur="6s"
       repeatCount="7"  >
          <mpath xlink:href="#inTrace"/>
     </animateMotion> 
 </use>  
       <!-- Земля -->
 <polyline  stroke="#888" stroke-width="3" points="38,315 300,315" />
</svg>

Анимация движения пассажиров к колесу обозрения

Используется команда <animateMotion> движение объекта вдоль трассы движения

         <!-- Анимация движения пассажиров  -->
 <use xlink:href="#Man" transform="translate(0,0) scale(0.8)" style="stroke:blue; fill:black;"> 
     <animateMotion id="an1"
       begin="6s"
       dur="6s"
       repeatCount="7"  >
          <mpath xlink:href="#outTrace"/>
     </animateMotion> 
 </use>    
    <use xlink:href="#Man" transform="translate(0,0) scale(0.8)" style="stroke:red; fill:black;"> 
     <animateMotion id="an2"
       begin="6s"
       dur="6s"
       repeatCount="7"  >
          <mpath xlink:href="#inTrace"/>
     </animateMotion> 
 </use>  

Ниже полный код:

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="548" height="664" viewBox="0 0 274 332" preserveAspectRatio="xMinYMin meet" version="1.1">

<defs>
        
        <!-- Корзина -->
<g id="basket" >   
    
     <!-- Человек слева в корзине -->
  <g fill="red" stroke="white" stroke-width="0.5">
    <path d="m125 49.2c0.7 0 1.6 0.5 1.7 1.2 0.1 0.8-0.6 1.9-1.4 1.9-0.9 0.1-1.9-1-1.8-1.9 0-0.7 0.9-1.2 1.6-1.2z" /> 
    <path d="m124.1 52.2-0.1 1.1-1.2 0.6-0.1 1.4h4.2v-1.5l-1.4-0.6V52.4Z" /> 
  </g>  

               <!-- Человек справа в корзине -->
  <g fill="blue" stroke="white" stroke-width="0.5">
     <path d="m149 49.2c0.7 0 1.6 0.5 1.7 1.2 0.1 0.8-0.6 1.9-1.4 1.9-0.9 0.1-1.9-1-1.8-1.9 0-0.7 0.9-1.2 1.6-1.2z" />   
    <path d="m148.1 52.2-0.1 1.1-1.2 0.6-0.1 1.4h4.2v-1.5l-1.4-0.6V52.4Z" />
  </g>
  <path fill="none" stroke="#7C9093" d="m126.3 45.8 9-16.7 9.7 16.7" />
  
  <path fill="none" stroke="#652382" stroke-width="0.5" d="m118.1 44.8 3.5 20.4h28.4l5-20.6z"/>
  <path fill="#652382" d="m118.1 44.8 0.4 2.7h35.6l0.9-3zM119.7 55.2"/>
  <path fill="#A84172" d="m119.7 55.2h32.7l-2.5 9.9-28.4 0z" />
  <path fill="white" d="m131.9 47.5h11.2v7.7h-11.1z" />
         <!-- Окружность точки крепления корзины     -->
  <circle cx="136.45" cy="29" r="4" fill="#d2d2d2" opacity="1" />  
</g>  
 
 <g id="Man" transform="translate(0,0) scale(1,-1)">
    <path   fill="none">
         <animate
          attributeName="d"
          begin="0.1s"
          dur="0.4s"
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path> 
</g>   
 <g id="Woman" transform="translate(0,0) scale(1,-1)">
    <path   fill="none">
         <animate
          attributeName="d"
          begin="0.1s"
          dur="0.3s"
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path> 
     <path   d="M-1,11 1,11 3,5 -3,5 -1,11"  /> 
</g>

          <!-- Трассы движения фигурок к карусели  -->
    <path id="inTrace" stroke="red" fill="none" d="m-20.4 321.1c1.4 0 22-2.2 32.7-4.9 30.1-7.7 87.4-32.1 87.4-32.1 12.3-1.3 27.6 4.4 36.8-3.8 2.8-2.5 2.5-10.9 2.5-10.9" />  
 <path id="outTrace" stroke="blue" fill="none" d="m158.4 269.7c0 0 0.9 7.9-1.6 10.4-11 10.7-45.7 6.1-45.7 6.1l-24.7 2.1-52.2 26c0 0-12.2 8.1-19 10.4-11 3.7-34.5 5.2-34.5 5.2" />
 </defs> 
  <rect width="100%" height="100%" fill="#2BDEF2" />
         <!-- Серый круг -->
  <circle cx="142" cy="132" r="35" fill="#888888" stroke="#888" stroke-width="10" opacity="1" />     
    
   <!-- Кольцо опоры -->
   <circle cx="142" cy="132" r="16" fill="none" stroke="#F3AE34" stroke-width="5"  opacity="1"/>
     
              <!-- Опора -->
  <path id="pillar" fill="none" stroke="#F3AE34" stroke-width="5" d="M96 300.2 137.3 147h5.5 4.5l42.3 154.2M72.1 300.7l139.8-1 0.2 14.4-140-0.5" />
          <!-- Центральный круг     -->
    <circle cx="142" cy="132" r="14" fill="#683C10" />      
                <!-- Основание -->
 <path fill="#683C10" stroke="#683C10" stroke-width="4" d="m72.1 300.7 139.8-1 0.2 14.4-140-0.5z" />
            <!-- Ограда     -->
    <polyline id="rack" stroke="#888" stroke-width="1" points="38,310 38,293" /> 
    
      <polyline  stroke="#683C10" stroke-width="2" points="104,265 182,265" />    
    <use href="#rack" x="-20" y="5" /> 
    <use href="#rack" x="-10" y="2" />  
     <use href="#rack" x="10" y="-5" /> 
      <use href="#rack" x="20" y="-9" />
       <use href="#rack"  x="30" y="-14" /> 
        <use href="#rack"  x="40" y="-19" />
         <use href="#rack"  x="50" y="-22" /> 
          <use href="#rack"  x="60" y="-27" /> 
         <use href="#rack"  x="70" y="-27" /> 
        <use href="#rack"  x="80" y="-27" /> 
       <use href="#rack"  x="90" y="-27" /> 
      <use href="#rack"  x="100" y="-27" />    
     <use href="#rack"  x="110" y="-27" /> 
    <use href="#rack"  x="120" y="-27" />  
   <use href="#rack"  x="130" y="-27" /> 
  <use href="#rack"  x="140" y="-27" />   
    <polyline  stroke="#683C10" stroke-width="2" points="14,300 104,265" />  
<g id="wheel"> 
 <!-- Большой круг -->
    <circle cx="142" cy="135" r="108" fill="none" stroke="white" stroke-width="8" opacity="1"/>
      
      <!-- Спицы к корзинам -->
  <g fill="none" stroke="#888" >
      <path  d="m 135,31 6,70" />   
       <path  d="M 213.12712,54.864406 165.29661,112" />
        <path  d="m 247.94492,129 -72,8" /> 
         <path  d="M 222,206.55508 170,160" />
          <path  d="m 147,243.02119 -3.16526,-70" />
           <path  d="M 70,213.12712 116.76271,160" />
            <path  d="m 40,139.5 73.152543,-3.51695" />
             <path  d="m 61.54661,63.305084 53.45763,47.830506" />
  </g>  
     <!-- Копии клонов одной корзины -->
 <use xlink:href="#basket"  > 
   <animateTransform id="an_B1" attributeName="transform" type="rotate" begin="0s" dur="48s"
    values="0 136.4 29;-360 136.4 29" repeatCount="1" fill="freeze" />  
</use> 
 <use xlink:href="#basket" transform="rotate(45 142 135)" >
    <animateTransform id="an_B2" attributeName="transform" type="rotate" begin="0s" dur="48s"
    values="-45 136.4 29;-405 136.4 29" repeatCount="1" additive="sum" fill="freeze" />  
</use>  
 <use xlink:href="#basket" transform="rotate(90 142 135)" >
   <animateTransform id="an_B3" attributeName="transform" type="rotate" begin="0s" dur="48s"
    values="-90 136.4 29;-450 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
</use>   
    <use xlink:href="#basket" transform="rotate(135 142 135)" >
      <animateTransform id="an_B4" attributeName="transform" type="rotate" begin="0s" dur="48s"
       values="-135 136.4 29;-495 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
    </use>      
  <use xlink:href="#basket" transform="rotate(180 142 135)" >
      <animateTransform id="an_B5" attributeName="transform" type="rotate" begin="0s" dur="48s"
       values="-180 136.4 29;-540 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
  </use>  
 <use xlink:href="#basket" transform="rotate(225 142 135)" > 
   <animateTransform id="an_B6" attributeName="transform" type="rotate" begin="0s" dur="48s"
       values="-225 136.4 29;-585 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
 </use>   
 <use xlink:href="#basket" transform="rotate(270 142 135)" > 
    <animateTransform id="an_B7" attributeName="transform" type="rotate" begin="0s" dur="48s"
       values="-270 136.4 29;-630 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
 </use>    
 
  <use xlink:href="#basket" transform="rotate(315 142 135)" > 
    <animateTransform id="an_B7" attributeName="transform" type="rotate" begin="0s" dur="48s"
       values="-315 136.4 29;-675 136.4 29" repeatCount="1" additive="sum" fill="freeze"  />  
 </use>   
  
</g>   
      <!-- Анимация вращения колеса обозрения -->
 <animateTransform id="an_BigHat" xlink:href="#wheel" attributeName="transform" type="rotate" begin="0s" dur="48s" values="0 142 135;360 142 135" repeatCount="1"  />   
       <!-- Помост -->
<g fill="grey" stroke="#683C10" >
<path d="m106.6 280.3 94.3 0-10.4 8H93.5Z" class="s0"/>
  <path d="M12.9 314.3 104.8 280.3 93.5 288.2 34.2 314.3Z" class="s0"/>
 </g>   
 
 
          <!-- Анимация движения пассажиров  -->
 <use xlink:href="#Man" transform="translate(0,0) scale(1)" style="stroke:blue; fill:black;"> 
     <animateMotion id="an1"
       begin="0s"
       dur="6s"
       repeatCount="7"  >
          <mpath xlink:href="#outTrace"/>
     </animateMotion> 
 </use>    
    <use xlink:href="#Woman" transform="translate(0,0) scale(1)" style="stroke:crimson; fill:red"> 
     <animateMotion id="an2"
       begin="0.2s"
       dur="6s"
       repeatCount="7"  >
          <mpath xlink:href="#inTrace"/>
     </animateMotion> 
 </use>  
       <!-- Земля -->
 <polyline  stroke="#888" stroke-width="3" points="38,315 300,315" />
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.