Как масштабировать SVG-путь для функции motionpath anime.js? - PullRequest
Новая
       52

Как масштабировать SVG-путь для функции motionpath anime.js?

0 голосов
/ 29 декабря 2018

Я использую anime.js для анимации SVG-круга вдоль SVG-пути с помощью функции motionPath.Все работает, кроме как я не могу масштабировать путь.Когда я применяю стиль CSS или заключаю путь в элемент div, видимый путь изменяется, но функция все еще использует исходный путь.Есть ли способ масштабировать путь SVG, чтобы функция anime.js распознала масштабированный путь. 

<!doctype html>
<html>
<head>
<style>
	svg .corkShape{fill-rule:evenodd;clip-rule:evenodd;fill:#D4A676;}
	svg .corkTexture{fill-rule:evenodd;clip-rule:evenodd;fill:#CE976A;}
	svg .jar{opacity:0.3;fill:#30AFE2;enable-background:new;}
	svg .highlight{opacity:0.3;fill:#8ADFED;}
	svg .fireflyShape{fill:url(#firefly);}
	svg .firefly {
		background-repeat: no-repeat;}
	svg .square {
		width: 10px;
		height: 10px;
		background-color: black;}
	#jar-container{
		position: absolute;
		top: 10px;
		left: 10px;
	}
	.fireflyContainer {
		top: 100px;
		left: 1px;
		position: absolute;
	}
	.trackContainer {
		position: absolute;
		top 10px;
	}
  .track {
    fill: none;
  }
</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
</head>
<body>
<!--Track-->
	<div class="trackContainer">
	<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="256" height="112" viewBox="0 0 38.37 68.86"><defs><style> </style></defs><path class="track" d="M-23.47-89.7c70.39-124,361.39,64.87,258.3,182.5-86.29,98.46-269.89-42.31-246.33,172C-4.9,324.9,22,421.63,85.33,448.6c81.9,34.92,123.69-45.7,118.31-115.21C191.63,178.3-113.26,68.56-23.47-89.7Z" transform="translate(40.49 130.8)"/></svg>
	
<!--Firefly-->

<div class="fireflyContainer">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" 
	 viewBox="0 0 569 990.7"  xml:space="preserve">
	<radialgradient id="firefly" cx="137.9349" cy="1301.0017" r="68.1967" gradientTransform="matrix(0.8558 0 0 0.8512 4.3547 -551.9129)" gradientUnits="userSpaceOnUse">
	<stop  offset="0.2659" style="stop-color:#00BBF2"/>
	<stop  offset="1" style="stop-color:#00BBF2;stop-opacity:0"/>
</radialgradient>
<ellipse class="fireflyShape" cx="122.4" cy="555.6" rx="58.2" ry="57.9"/>
	</svg>
	</div>

	</div>
<!--Jar-->
<div id="jar-container">
<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" x="0px" y="0px" viewBox="0 0 569 990.7" style="enable-background:new 0 0 569 990.7;" xml:space="preserve">
<g id="Whole">
<g id="corkGroup">
	<path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>
 	<path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>
	<path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>
</g>
	<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>
<g id="jarHighlightGroup">
	<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>
	<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>
</g>
</g>
</svg>
	</div>
	

<script>
	
	var path = anime.path('path.track');
	
	var motionPath = anime({
		targets: ".fireflyContainer",
		duration: 10000,
		translateX: (path('x')),
		translateY: (path('y')),
		rotate: path('angle'),
		direction: 'normal',
		loop: true,
		easing: 'linear',
	});
</script>
</body>
</html>

1 Ответ

0 голосов
/ 30 декабря 2018

Использование SMIL-анимации

Так я бы поступил с SMIL-анимацией.Как вы можете видеть, я поместил все в один элемент <svg>.Теперь все масштабируется вместе.Теперь ширина элемента svg равна width="250", но вы можете изменить это. 

svg .corkShape {
  fill: #d4a676;
}
svg .corkTexture {
  fill: #ce976a;
}
svg .jar {
  opacity: 0.3;
  fill: #30afe2;
}
svg .highlight {
  opacity: 0.3;
  fill: #8adfed;
}
svg .fireflyShape {
  fill: url(#firefly);
}
<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" viewBox="0 0 569 990.7">
  <defs>
    

  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" gradientUnits="objectBoundingBox">
    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>
    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>
  </radialgradient>

        <path class="track" id="track"
              d="M-23.47-89.7
                 c70.39-124,361.39,64.87,258.3,182.5
                 c-86.29,98.46-269.89-42.31-246.33,172
                 C-4.9,324.9,22,421.63,85.33,448.6
                 c81.9,34.92,123.69-45.7,118.31-115.21
                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />
  
  </defs> 
  
  
  
<!--Jar-->  
<g id="Whole">
<g id="corkGroup">
    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>
    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>
    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>
</g>
<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>
<g id="jarHighlightGroup">
<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>
<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>
</g>
</g>
  
<!--Trackr   
<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />--> 
  
<g transform="translate(130,400)">  
<ellipse class="fireflyShape" rx="58.2" ry="57.9">   
<animateMotion begin="0s" dur="10s" rotate="auto" repeatCount="indefinite">
<mpath xlink:href="#track"></mpath>
</animateMotion>
</ellipse>
</g>
</svg>

Использование Javascript

Часть SVG почти такая же, с той разницей, что сейчас я не использую animateMotion.Также CSS то же самое.Пожалуйста, прочитайте комментарии в коде. 

let track = document.getElementById("track"),
trackLength = track.getTotalLength(),
ff = document.querySelector("#ff"),

dur = 10000; //duration of one loop of track, in ms

function update(time) {
requestAnimationFrame(update);
var t = (time % dur)/dur, // position in repeat cycle 
distance, // distance along the path for the firefly
point; // SVGPoint for the distance 

distance = trackLength * ( t % 1 );//console.log(distance) 
point = track.getPointAtLength(distance);
   
ff.setAttributeNS(null,"transform",`translate( ${point.x}, ${point.y} )`);
}
requestAnimationFrame(update);
svg .corkShape {
  fill: #d4a676;
}
svg .corkTexture {
  fill: #ce976a;
}
svg .jar {
  opacity: 0.3;
  fill: #30afe2;
}
svg .highlight {
  opacity: 0.3;
  fill: #8adfed;
}
svg .fireflyShape {
  fill: url(#firefly);
}
<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250px" viewBox="0 0 569 990.7">
  <defs>
    

  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" >
    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>
    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>
  </radialgradient>

        <path class="track" id="track"
              d="M-23.47-89.7
                 c70.39-124,361.39,64.87,258.3,182.5
                 c-86.29,98.46-269.89-42.31-246.33,172
                 C-4.9,324.9,22,421.63,85.33,448.6
                 c81.9,34.92,123.69-45.7,118.31-115.21
                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />
  
  </defs> 
  
  
  
<!--Jar-->  
<g id="Whole">
<g id="corkGroup">
    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>
    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>
    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>
</g>
<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>
<g id="jarHighlightGroup">
<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>
<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>
</g>
</g>
  
<!--<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />-->
  
<g transform="translate(130,400)">  
<ellipse class="fireflyShape" id="ff" rx="58.2" ry="57.9"></ellipse>
</g>
</svg>

Я понимаю, что вы можете захотеть использовать anime.js вместо SMIL или простого javascript.По крайней мере, я надеюсь, вы понимаете, что я подразумеваю под "тем же элементом svg".Надеюсь, это поможет.

...