Animation SVG Progressbar avec cercle de départ

Est-il possible d’animer un cercle avec le tracé de la ligne?

J’ai essayé de suivre code.can je fusionne le chemin et le cercle de deux lignes et applique la transition pour le même

$(document).ready(function(){ var svgPath = document.getElementById('heart'); var path = new ProgressBar.Path(svgPath, { duration: 3000 }); path.animate(-1, { easing: 'easeOutBounce', duration: 2000 }, function() { console.log('Animation has finished'); }); }); 
  #container { width:220px; position: relative; } 
   

Cette bibliothèque vous permet de transmettre une fonction step qui est appelée pour chaque étape de l’animation.

En utilisant cela, la valeur renvoyée par la fonction value() et quelques fonctions pratiques du chemin SVG, vous pouvez calculer les coordonnées de la fin de la ligne de progression. Vous pouvez ensuite utiliser ces coordonnées pour positionner le cercle.

Démo ci-dessous:

 $(document).ready(function(){ var svgPath = document.getElementById('heart'); var shape = new ProgressBar.Path(svgPath); var pathLen = shape.path.getTotalLength(); shape.animate(-1, { easing: 'easeOutBounce', duration: 2000, attachment: document.getElementById("circle"), step: function(state, shape, attachment) { // 'attachment' is a DOM reference to the circle element var val = 1 + shape.value(); // buggy value() function? var endPosition = shape.path.getPointAtLength(val * pathLen); attachment.cx.baseVal.value = endPosition.x; attachment.cy.baseVal.value = endPosition.y; } }, function() { console.log('Animation has finished'); }); }); 
 #container { width:220px; position: relative; }