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 that you have read and understand our privacy policy and code of conduct.

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