5

Как сделать анимацию вращения этой SVG фигуры?

  • Необходимо что бы фигура вращалась при наведении мыши.
  • Ориентация букв (верхом вверх) сохранялась во время вращения.

Задача делать не просто что бы работала, а хорошим, красивым способом. Интересны разные варианты решений, на любых технологиях: SMIL, JavaScript, CSS и. др.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="190px" height="190px" viewBox="0 0 150 150" version="1.1">
  <g transform="translate(-27.970238,-63.089294)">
    <circle cx="102.97024" cy="138.08929" r="75" fill="#faa"/>
    <path d="m163.72735 175.21801-121.51422 0 60.75711-105.234398z" fill="#fea"/>
    <path d="m101.32534 136.51129c1.13707 1.96946-2.093801 2.50441-3.273369 1.88988-3.196557-1.66532-2.576443-6.16511-0.506394-8.43662 3.702833-4.0632 10.184423-2.9187 13.599873 0.8771 5.01231 5.57048 3.28688 14.26396-2.26058 18.76312-7.3939 5.99667-18.365634 3.66706-23.926377-3.64407-6.997627-9.20031-4.05364-22.47803 5.027556-29.08962 10.998541-8.00754 26.596501-4.44396 34.252881 6.41104 9.02277 12.79224 4.83662 30.71878-7.79454 39.41613-14.58316 10.04143-34.843578 5.23086-44.579374-9.17802-11.062431-16.37229-5.626194-38.97017 10.561506-49.74263 18.160148-12.085079 43.098048-6.022324 54.905878 11.94499 13.10894 19.94713 6.41905 47.2269-13.32848 60.06913" style="fill:none;stroke-width:0.26458332;stroke:#000"/>
    <g>
    <circle cx="55.940475" cy="108.0119" r="12.851191" fill="#efa"/>
    <text x="51" y="112" style="fill:#000;font-family:sans-serif;font-size:14px;font-weight:bold;letter-spacing:0px;font-height:2;">
        A
    </text>
    </g>
    <circle cx="153.68513" cy="110.27975" r="12.851191" fill="#efa"/>
    <text xml:space="preserve" x="114" y="116" style=fill:#000;font-family:sans-serif;font-size:14px;font-weight:bold;">
        B
    </text>
    <text xml:space="preserve" x="102.05357" y="195.70238" style="fill:#000;font-family:sans-serif;font-size:10.58333302px;letter-spacing:0px;line-height:1.25;word-spacing:0px">
C
</text>
    <g>
    <circle cx="105.15297" cy="192.45177" r="12.851191" fill="#efa"/>
    <text x="100" y="198" style="fill:#000;font-family:sans-serif;font-size:14px;font-weight:bold;letter-spacing:0px;line-height:1.25;word-spacing:0px">
        C
    </text>
    </g>
  </g>
</svg>

1

3 ответа 3

16

Я бы сделал вот так:

svg > g {
  animation: rot1 10s linear infinite;
}

svg text {
  animation: rot2 10s linear infinite;
}

@keyframes rot1 {
  from { transform: rotate(0)}
  to { transform: rotate(1turn)}
}

@keyframes rot2 {
  from { transform: rotate(0)}
  to { transform: rotate(-1turn)}
}

text {
  font-family:sans-serif;
  font-size:14px;
  font-weight:bold;
  letter-spacing:0px;
  text-anchor:middle;
  dominant-baseline:central;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="190px" height="190px" viewBox="-75 -75 150 150" version="1.1">

  <g> <!-- вот эту группу вращаем-->
  
    <g transform="translate(-103,-138)">

      <circle cx="102.97024" cy="138.08929" r="75" fill="#faa"/>
      <path d="m163.72735 175.21801-121.51422 0 60.75711-105.234398z" fill="#fea"/>
      <path d="m101.32534 136.51129c1.13707 1.96946-2.093801 2.50441-3.273369 1.88988-3.196557-1.66532-2.576443-6.16511-0.506394-8.43662 3.702833-4.0632 10.184423-2.9187 13.599873 0.8771 5.01231 5.57048 3.28688 14.26396-2.26058 18.76312-7.3939 5.99667-18.365634 3.66706-23.926377-3.64407-6.997627-9.20031-4.05364-22.47803 5.027556-29.08962 10.998541-8.00754 26.596501-4.44396 34.252881 6.41104 9.02277 12.79224 4.83662 30.71878-7.79454 39.41613-14.58316 10.04143-34.843578 5.23086-44.579374-9.17802-11.062431-16.37229-5.626194-38.97017 10.561506-49.74263 18.160148-12.085079 43.098048-6.022324 54.905878 11.94499 13.10894 19.94713 6.41905 47.2269-13.32848 60.06913" style="fill:none;stroke-width:0.26458332;stroke:#000"/>

      <g transform="translate(55.940475,108.0119)">
        <circle r="12.851191" fill="#efa"/>
        <text>A</text> <!-- а текст вращаем в обратном направлении -->
      </g>

      <g transform="translate(153.68513,110.27975)">
        <circle r="12.851191" fill="#efa"/>
        <text>B</text>
      </g>

      <g transform="translate(105.152,192.45177)">
        <circle r="12.851191" fill="#efa"/>
        <text>C</text>
      </g>

    </g>
    
  </g>
  
</svg>

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

1
  • 1
    Отлично! Я после того как написал вопрос, понял что можно двумя вращениями реализовать, уже собирался сам делать, но решил сюда зайти, и круто, уже ответ. Отмечаю, так как это то что нужно. Что порадовало, так то что без дополнительных технологий. Я то на SMIL хотел делать и не подумал что можно на чистом CSS сделать. 4 апр 2020 в 7:31
9

Pure SVG

Оптимизировал исходник, чтобы полегче был.

Логика анимация примерно та же, что и в ответе анимации CSS.

  1. Вращаем всю группу элементов.
  2. Внутри вторая анимация вращения кружков и букв.

Анимация начнется после клика

<style>
text {
  font-family:sans-serif;
  font-size:14px;
  font-weight:bold;
  fill:#6E6E6E;
  }
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="190px" height="190px" viewBox="0 0 150 150" version="1.1">
 <defs>	
  </defs>
  <g id="common">
  <g transform="translate(-27.970238,-63.089294)">
    <circle cx="102.9" cy="138.0" r="75" fill="#faa"/> 
	<path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
   
   
	      <!-- Спираль -->
    <path  d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:1;stroke:#6E6E6E">
	  
	</path>
    <g id="La">
    <circle cx="55.9" cy="108.0" r="12.9" fill="#efa"/>
	    <text  x="51" y="112"> A  </text> 
	     <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 55.9, 108;360, 55.9, 108" additive="sum" /> 
    </g>
	<g>
    <circle cx="153.7" cy="110.3" r="12.9" fill="#efa"/>
    <text xml:space="preserve" x="114" y="116" >
        B
    </text> 
	   <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 153.7, 110.3;360, 153.7, 110.3" additive="sum" /> 
  </g> 
  <g>
  <circle cx="105.2" cy="192.5" r="12.9" fill="#efa"   />
    <text x="100" y="198"  > C
</text> 
       <!-- Анимация вращения буквы `С`   -->
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 105.2, 192.5;360, 105.2, 192.5" additive="sum" /> 
    </g>
   </g>  
  </g>  
      <!-- Анимация вращения всей фигуры   -->
   <animateTransform xlink:href="#common" attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 75.38, 75;-360, 75.38, 75" additive="sum" />   
</svg>  

Добавление анимации спирали:

<animate attributeName="stroke-dasharray" begin="svg1.click" 
 repeatCount="indefinite" restart="whenNotActive" dur="10s" values="0,432;432,0;0,432" fill="freeze" />   

text {
  font-family:sans-serif;
  font-size:14px;
  font-weight:bold;
  fill:#6E6E6E;
  }
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="190px" height="190px" viewBox="0 0 150 150" version="1.1">
 <defs>	
  </defs>
  <g id="common">
  <g transform="translate(-27.970238,-63.089294)">
    <circle cx="102.9" cy="138.0" r="75" fill="#faa"/> 
	<path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
      <path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
  	      <!-- Спираль -->
    <path stroke-dasharray="432;0" d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:2;stroke:#6E6E6E">
	   <!-- Анимация спирали -->
	 <animate attributeName="stroke-dasharray" begin="svg1.click" repeatCount="indefinite" restart="whenNotActive" dur="10s" values="0,432;432,0;0,432" fill="freeze" />
	</path>
    <g id="La">
    <circle cx="55.9" cy="108.0" r="12.9" fill="#efa"/>
	    <text  x="51" y="112"> A  </text> 
	     <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 55.9, 108;360, 55.9, 108" additive="sum" /> 
    </g>
	<g>
    <circle cx="153.7" cy="110.3" r="12.9" fill="#efa"/>
    <text xml:space="preserve" x="114" y="116" >
        B
    </text> 
	   <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 153.7, 110.3;360, 153.7, 110.3" additive="sum" /> 
  </g> 
  <g>
  <circle cx="105.2" cy="192.5" r="12.9" fill="#efa"   />
    <text x="100" y="198"  > C
</text> 
       <!-- Анимация вращения буквы `С`   -->
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 105.2, 192.5;360, 105.2, 192.5" additive="sum" /> 
    </g>
   </g>  
  </g>  
      <!-- Анимация вращения всей фигуры   -->
   <animateTransform xlink:href="#common" attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 75.38, 75;-360, 75.38, 75" additive="sum" />   
</svg>  

Ещё вариант с треком для спирали

<style>
text {
  font-family:sans-serif;
  font-size:14px;
  font-weight:bold;
  fill:#6E6E6E;
  }
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="190px" height="190px" viewBox="0 0 150 150" version="1.1">
 <defs>	
  </defs>
  <g id="common">
  <g transform="translate(-27.970238,-63.089294)">
    <circle cx="102.9" cy="138.0" r="75" fill="#faa"/> 
	<path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
   
        <!-- Трек для спирали (розовый) -->
   <path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
    <path class="track"  d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:3;stroke:#FFAAAA"/>
	      <!-- Спираль -->
    <path stroke-dasharray="0,432" d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:2;stroke:#6E6E6E">
	   <!-- Анимация спирали -->
	 <animate attributeName="stroke-dasharray" begin="svg1.click" repeatCount="indefinite" restart="whenNotActive" dur="10s" values="0,432;432,0;0,432" fill="freeze" />
	</path>
    <g id="La">
    <circle cx="55.9" cy="108.0" r="12.9" fill="#efa"/>
	    <text  x="51" y="112"> A  </text> 
	     <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 55.9, 108;360, 55.9, 108" additive="sum" /> 
    </g>
	<g>
    <circle cx="153.7" cy="110.3" r="12.9" fill="#efa"/>
    <text xml:space="preserve" x="114" y="116" >
        B
    </text> 
	   <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 153.7, 110.3;360, 153.7, 110.3" additive="sum" /> 
  </g> 
  <g>
  <circle cx="105.2" cy="192.5" r="12.9" fill="#efa"   />
    <text x="100" y="198"  > C
</text> 
       <!-- Анимация вращения буквы `С`   -->
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 105.2, 192.5;360, 105.2, 192.5" additive="sum" /> 
    </g>
   </g>  
  </g>  
      <!-- Анимация вращения всей фигуры   -->
   <animateTransform xlink:href="#common" attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 75.38, 75;-360, 75.38, 75" additive="sum" />   
</svg>  

1
4

Варианты анимации спирали совместно с другими SVG элементами

В этом примере задействовано несколько анимаций:

  1. Анимация вращения лого
  2. Синхронная анимация вращения букв, чтобы буквы постоянно сохраняли своё исходное расположение.
  3. Анимация роста спирали
  4. Синхронная анимация спирали и элемента на конце спирали
    Это может быть любая фигура: стрелка, шарик и т.д

Эту анимацию реализует animateMotion

где #track - траектория движения спирали

<animateMotion
           id="back"
           dur="5s"
           begin="forwards.end"
           repeatCount="1"
           keyPoints="1;0"
           keyTimes="0;1"
           calcMode="linear"
           rotate="auto"
           fill="freeze" > 
    <mpath xlink:href="#track" />
    </animateMotion> 

Атрибуты отвечающие за направление вращения

 keyPoints="1;0"
 keyTimes="0;1"

Полный код примера. Для начала анимации кликните по лого.

<style>
text {
  font-family:sans-serif;
  font-size:14px;
  font-weight:bold;
  fill:#6E6E6E;
  }
</style>
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="190px" height="190px" viewBox="0 0 150 150" version="1.1">
 <defs> 
  </defs>
  <g id="common">
  <g transform="translate(-27.970238,-63.089294)">
    <circle cx="102.9" cy="138.0" r="75" fill="#faa"/> 
    <path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
   
       
   <path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
      <!-- Трек для спирали (розовый) -->
    <path id="track"  d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:3;stroke:#FFAAAA"/>
          <!-- Спираль -->
    <path  stroke-dasharray="0,432" d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:2;stroke:#6E6E6E">
       <!-- Анимация спирали -->
     <animate attributeName="stroke-dasharray" begin="svg1.click" repeatCount="indefinite" restart="whenNotActive" dur="10s" values="0,432;432,0;0,432" fill="freeze" />
    </path> 
    <polyline id="triangle" transform="translate(-12 -6)" points="12,2 20,6 12,12" stroke="#D80094" fill="#6E6E6E" >  
       <!-- Движение стрелки по спирали по часовой стрелке -->
    <animateMotion id="forwards"
      begin="svg1.click;back.end"
      dur="5s"
      rotate="auto" >
      <mpath xlink:href="#track" />
    </animateMotion> 
       <!-- Движение стрелки по спирали против часовой стрелки -->
      <animateMotion
           id="back"
           dur="5s"
           begin="forwards.end"
           repeatCount="1"
           keyPoints="1;0"
           keyTimes="0;1"
           calcMode="linear"
           rotate="auto"
           fill="freeze" > 
    <mpath xlink:href="#track" />
    </animateMotion> 
   </polyline>  
    
    <g id="La">
    <circle cx="55.9" cy="108.0" r="12.9" fill="#efa"/>
        <text  x="51" y="112"> A  </text> 
         <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 55.9, 108;360, 55.9, 108" additive="sum" /> 
    </g>
    <g>
    <circle cx="153.7" cy="110.3" r="12.9" fill="#efa"/>
    <text xml:space="preserve" x="114" y="116" >
        B
    </text> 
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 153.7, 110.3;360, 153.7, 110.3" additive="sum" /> 
  </g> 
  <g>
  <circle cx="105.2" cy="192.5" r="12.9" fill="#efa"   />
    <text x="100" y="198"  > C
</text> 
       <!-- Анимация вращения буквы `С`   -->
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 105.2, 192.5;360, 105.2, 192.5" additive="sum" /> 
    </g>
   </g>  
  </g>  
      <!-- Анимация вращения всей фигуры   -->
   <animateTransform xlink:href="#common" attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 75.38, 75;-360, 75.38, 75" additive="sum" />   
</svg>

Другой пример с шариком на конце растущей спирали

<style>
text {
  font-family:sans-serif;
  font-size:14px;
  font-weight:bold;
  fill:#6E6E6E;
  }
</style>
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="190px" height="190px" viewBox="0 0 150 150" version="1.1">
 <defs> 
  </defs>
  <g id="common">
  <g transform="translate(-27.970238,-63.089294)">
    <circle cx="102.9" cy="138.0" r="75" fill="#faa"/> 
    <path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
   
       
   <path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
      <!-- Трек для спирали (розовый) -->
    <path id="track"  d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:3;stroke:#FFAAAA"/>
          <!-- Спираль -->
    <path  stroke-dasharray="0,432" d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:2;stroke:#6E6E6E">
       <!-- Анимация спирали -->
     <animate attributeName="stroke-dasharray" begin="svg1.click" repeatCount="indefinite" restart="whenNotActive" dur="10s" values="0,432;432,0;0,432" fill="freeze" />
    </path> 
    <circle cx="0" cy="0" r="6" fill="#6E6E6E">
       <!-- Движение шарика по спирали по часовой стрелке -->
    <animateMotion id="forwards"
      begin="svg1.click;back.end"
      dur="5s" >
      <mpath xlink:href="#track" />
    </animateMotion> 
       <!-- Движение шарика по спирали против часовой стрелки -->
      <animateMotion
           id="back"
           dur="5s"
           begin="forwards.end"
           repeatCount="1"
           keyPoints="1;0"
           keyTimes="0;1"
           calcMode="linear"
           rotate="auto"
           fill="freeze" > 
    <mpath xlink:href="#track" />
    </animateMotion> 
   </circle>    
    
    <g id="La">
    <circle cx="55.9" cy="108.0" r="12.9" fill="#efa"/>
        <text  x="51" y="112"> A  </text> 
         <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 55.9, 108;360, 55.9, 108" additive="sum" /> 
    </g>
    <g>
    <circle cx="153.7" cy="110.3" r="12.9" fill="#efa"/>
    <text xml:space="preserve" x="114" y="116" >
        B
    </text> 
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 153.7, 110.3;360, 153.7, 110.3" additive="sum" /> 
  </g> 
  <g>
  <circle cx="105.2" cy="192.5" r="12.9" fill="#efa"   />
    <text x="100" y="198"  > C
</text> 
       <!-- Анимация вращения буквы `С`   -->
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 105.2, 192.5;360, 105.2, 192.5" additive="sum" /> 
    </g>
   </g>  
  </g>  
      <!-- Анимация вращения всей фигуры   -->
   <animateTransform xlink:href="#common" attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 75.38, 75;-360, 75.38, 75" additive="sum" />   
</svg>

1
  • 2
    Вау ))) Скопировал себе.
    – Denis640Kb
    6 апр 2020 в 7:36

Ваш ответ

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

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