Как при использовании команды animateMotion избежать переворачивания объекта движения

135

20 ноября 2019, 08:20

Я создал svg приложение в котором два объекта движутся по криволинейной траектории.
Жёлтый шарик при движении не переворачивается, так как имеет симметричную форму. Балерина на определенных участках переворачиваются вниз головой.

  <svg version = "1.1"   xmlns = "http://www.w3.org/2000/svg"  xmlns:xlink = "http://www.w3.org/1999/xlink" 
      width="60%" height="60%" 
     viewBox="0 0 300 200" > 
  
<defs> 
 
 <marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"  
        markerUnits="strokeWidth" orient="auto" 
          markerWidth="4" markerHeight="3"> 
        <polyline points="0,0 10,5 0,10 1,5" fill="black" /> 
 </marker> 
  
  <linearGradient id="grad1" x2="0%" y2="100%" 
		spreadMethod="pad" > 
  <stop offset="0%" stop-color="skyblue"/> 
  <stop offset="90%" stop-color="white"/>  
  <stop offset="100%" stop-color="yellowgreen"/> 
</linearGradient> 
 
  </defs> 
	 
 
   <rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" />   
    
       <!-- Траектория движения -->  
 
    <path id="t_path"  d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none"   /> 
 
            <!-- Балерина --> 
	 <path id="balerina" transform="scale(0.08)  translate(-100 -200) " fill="darkblue"  d="M468 264c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C469 262 468 263 468 264z" fill-rule="evenodd"> 
	 <animateMotion  begin="startButton.mouseover+0.5s" end="stopTeal.mouseover" 
		 dur="12s" repeatCount="1"  fill="freeze" rotate="auto" restart="whenNotActive" > 
		 <mpath xlink:href="#t_path" /> 
	</animateMotion> 
	 </path> 
	   
   
    <!-- Жёлтый шар --> 
<circle r="7" cx="2.5" cy="2.5" fill="yellow" stroke="green" > 
	 <animateMotion  begin="startButton.mouseover+0.25s" end="stopYellow.mouseover" 
		 dur="8s" repeatCount="2"  fill="freeze" restart="whenNotActive" > 
		 <mpath xlink:href="#t_path" /> 
	</animateMotion> 
</circle> 
 
	<!-- Кнопка`Start` --> 
<g 	id="startButton" transform="scale(0.7) translate(-20 -20)" > 
	<rect  x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" /> 
	<text  x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"  
	 fill="white" >Start</text>  
</g> 
   <!-- Группа кнопок стоп `Stop` --> 
 <g transform="translate(95 -5)"> 
<g id="stop" fill-opacity="1" >	 
   <rect  x="180" y="150" rx="3" ry="3" width="20" height="40" fill="none" stroke-width="2px" stroke="#c3c3c3" />   		 
	 
		<g id="stopYellow" > 
			<circle  r="6" cx="190" cy="160" fill="none" stroke="black"  />	 
			<circle  r="4" cx="190" cy="160" fill="yellow" stroke="orange"  />	 
		</g> 
	<g id="stopTeal" > 
		<circle r="6" cx="190" cy="180" fill="none" stroke="black"  />	 
		<circle  r="4" cx="190" cy="180" fill="darkblue" stroke="orange"  />	 
	</g>		 
	 
</g> 
	<text  x="170" y="170"  transform="rotate(-90 170,170)"  
	  font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray"  >Stop 
	</text> 
</g>	 
</svg>

Попробовал убрать в команде <animateMotion>атрибут rotate="auto"
Балерина перестала переворачиваться вниз головой, но на второй половине пути стала двигаться затылком, спиной вперед.

<svg version = "1.1"   xmlns = "http://www.w3.org/2000/svg"  xmlns:xlink = "http://www.w3.org/1999/xlink" 
      width="60%" height="60%" 
     viewBox="0 0 300 200" > 
  
<defs> 
 
 <marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"  
        markerUnits="strokeWidth" orient="auto" 
          markerWidth="4" markerHeight="3"> 
        <polyline points="0,0 10,5 0,10 1,5" fill="black" /> 
 </marker> 
  
  <linearGradient id="grad1" x2="0%" y2="100%" 
		spreadMethod="pad" > 
  <stop offset="0%" stop-color="skyblue"/> 
  <stop offset="90%" stop-color="white"/>  
  <stop offset="100%" stop-color="yellowgreen"/> 
</linearGradient> 
 
  </defs> 
	 
 
   <rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" />   
    
       <!-- Траектория движения -->  
 
    <path id="t_path"  d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none"   /> 
 
            <!-- Балерина --> 
	 <path id="balerina" transform="scale(0.08)  translate(-100 -200) " fill="darkblue"  d="M468 264c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C469 262 468 263 468 264z" fill-rule="evenodd"> 
	 <animateMotion  begin="startButton.mouseover+0.5s" end="stopTeal.mouseover" 
		 dur="12s" repeatCount="3"  fill="freeze"  restart="whenNotActive" > 
		 <mpath xlink:href="#t_path" /> 
	</animateMotion> 
	 </path> 
	   
   
    <!-- Жёлтый шар --> 
<circle r="7" cx="2.5" cy="2.5" fill="yellow" stroke="green" > 
	 <animateMotion  begin="startButton.mouseover+0.25s" end="stopYellow.mouseover" 
		 dur="8s" repeatCount="1"  fill="freeze" restart="whenNotActive" > 
		 <mpath xlink:href="#t_path" /> 
	</animateMotion> 
</circle> 
 
	<!-- Кнопка`Start` --> 
<g 	id="startButton" transform="scale(0.7) translate(-20 -20)" > 
	<rect  x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" /> 
	<text  x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"  
	 fill="white" >Start</text>  
</g> 
   <!-- Группа кнопок стоп `Stop` --> 
 <g transform="translate(95 -5)"> 
<g id="stop" fill-opacity="1" >	 
   <rect  x="180" y="150" rx="3" ry="3" width="20" height="40" fill="none" stroke-width="2px" stroke="#c3c3c3" />   		 
	 
		<g id="stopYellow" > 
			<circle  r="6" cx="190" cy="160" fill="none" stroke="black"  />	 
			<circle  r="4" cx="190" cy="160" fill="yellow" stroke="orange"  />	 
		</g> 
	<g id="stopTeal" > 
		<circle r="6" cx="190" cy="180" fill="none" stroke="black"  />	 
		<circle  r="4" cx="190" cy="180" fill="darkblue" stroke="orange"  />	 
	</g>		 
	 
</g> 
	<text  x="170" y="170"  transform="rotate(-90 170,170)"  
	  font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray"  >Stop 
	</text> 
</g>

Как сделать так, чтобы во второй половине пути балерина не переворачивалась и смотрела налево.

Answer 1

Как сделать так, чтобы во второй половине пути балерина не переворачивалась и смотрела налево.

Для этого я использую animateTransform type = "scale" и calcMode = "discrete". Масштаб - scale( -0.08,0.08) используется для переворота танцора.

Для плавности поворота используется keyTimes и calcMode="linear"

   <meta charset="utf-8"> 
   <svg version = "1.1"   xmlns = "http://www.w3.org/2000/svg"  xmlns:xlink = "http://www.w3.org/1999/xlink" 
      width="60%" height="60%" 
     viewBox="0 0 300 200" > 
  
<defs> 
 
 <marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"  
        markerUnits="strokeWidth" orient="auto" 
          markerWidth="4" markerHeight="3"> 
        <polyline points="0,0 10,5 0,10 1,5" fill="black" /> 
 </marker> 
  
  <linearGradient id="grad1" x2="0%" y2="100%" 
		spreadMethod="pad" > 
  <stop offset="0%" stop-color="skyblue"/> 
  <stop offset="90%" stop-color="white"/>  
  <stop offset="100%" stop-color="yellowgreen"/> 
</linearGradient> 
 
  </defs> 
	 
 
   <rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" />   
    
       <!-- Траектория движения -->  
 
    <path id="t_path"  d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none"   /> 
 
            <!-- Балерина --> 
	 <path id="balerina" transform="scale(0.08)" fill="darkblue"  d="M126.4,-43.5c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C127.4,-45.5,126.4,-44.5,126.4,-43.5z" fill-rule="evenodd"> 
	 <animateMotion  begin="startButton.mouseover+0.5s" end="stopTeal.mouseover" 
		 dur="12s" repeatCount="3"  fill="freeze" restart="whenNotActive" > 
		 <mpath xlink:href="#t_path" /> 
	</animateMotion> 
      
     <animateTransform attributeType="XML" attributeName="transform" type="scale" values="0.08,0.08; 
        0.08,0.08; 
        -0.08,0.08; 
        -0.08,0.08; 
        0.08,0.08;"   
keyTimes= "0;  
           0.45;  
           0.50; 
           0.95; 
           1"  begin="startButton.mouseover+0.5s" end="stopTeal.mouseover" 
		 dur="12s" repeatCount="3"  fill="freeze" restart="whenNotActive" /> 
	 </path> 
	   
   
 
	<!-- Кнопка`Start` --> 
<g 	id="startButton" transform="scale(0.7) translate(-20 -20)" > 
	<rect  x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" /> 
	<text  x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"  
	 fill="white" >Start</text>  
</g> 
   <!-- Группа кнопок стоп `Stop` --> 
 <g transform="translate(95 -5)"> 
<g id="stop" fill-opacity="1" >	 
   <rect  x="180" y="150" rx="3" ry="3" width="20" height="40" fill="none" stroke-width="2px" stroke="#c3c3c3" />   		 
	 
		<g id="stopYellow" > 
			<circle  r="6" cx="190" cy="160" fill="none" stroke="black"  />	 
			<circle  r="4" cx="190" cy="160" fill="yellow" stroke="orange"  />	 
		</g> 
	<g id="stopTeal" > 
		<circle r="6" cx="190" cy="180" fill="none" stroke="black"  />	 
		<circle  r="4" cx="190" cy="180" fill="darkblue" stroke="orange"  />	 
	</g>		 
	 
</g> 
	<text  x="170" y="170"  transform="rotate(-90 170,170)"  
	  font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray"  >Stop 
	</text> 
</g>	 
</svg>