主页 / 问题 / 1105276
Accepted
Дмитрий Полянин
Asked:2020-04-04 14:58:08 +0000 UTC2020-04-04 14:58:08 +0000 UTC

徽标的旋转动画，同时保持字母的方向

  • 772

如何制作这个 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>

javascript

3 个回答

  1. Best Answer

    我会这样做：

    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：我在这里移动了一些东西以使标记更容易旋转

    • 16

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

    • 9

  3. 与其他 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>

    • 4

相关问题