animer un svg

fabiobonzini
Javascript

Bonjour,

Je suis débutant en JS, je cherche à animer un dessin au format SVG.
le dessin représente une courbe en pointillé entre deux points (départ et arrivée)
Je souhaite animer progressivement ce SVG, c'est à dire le faire apparaitre petit à petit (temps total environ 5 secondes) de gauche à droite.

voici le code de mon svg :

<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1911.1 500" enable-background="new 0 0 1911.1 500" xml:space="preserve">
<g>
    <path fill="#054568" d="M61.7,330.2c-8,2.9-12.1,11.8-9.2,19.8c0.8,2.2,2.1,4.2,3.7,5.7c8.4,8.9,20.7,16,20.7,16s4.8-13.3,5.5-25.5
        c0.2-2.2,0-4.5-0.9-6.7C78.6,331.4,69.7,327.3,61.7,330.2z M69.7,352.4c-4.2,1.5-8.9-0.6-10.4-4.8c-1.5-4.2,0.6-8.9,4.8-10.4
        c4.2-1.5,8.9,0.6,10.4,4.8C76.1,346.2,74,350.8,69.7,352.4z"/>
</g>
<g>
    <path fill="#054568" d="M1854,130.1c-7.3-4.4-16.8-2.1-21.2,5.2c-1.2,2-1.9,4.2-2.2,6.4c-1.7,12.1,0.5,26.1,0.5,26.1
        s13.4-4.6,23.4-11.6c1.9-1.2,3.5-2.9,4.7-4.9C1863.7,144,1861.3,134.5,1854,130.1z M1841.8,150.3c-3.8-2.3-5.1-7.3-2.7-11.2
        c2.3-3.8,7.3-5.1,11.2-2.7c3.8,2.3,5.1,7.3,2.7,11.2C1850.6,151.4,1845.6,152.6,1841.8,150.3z"/>
</g>
<g>
    <g>
        <path fill="none" stroke="#172983" stroke-miterlimit="10" d="M86.5,370c1.6-1.2,3.3-2.3,4.9-3.5"/>
        <path fill="none" stroke="#172983" stroke-miterlimit="10" stroke-dasharray="12.0516,12.0516" d="M101.4,359.7
            c46.6-31.5,97.2-58,148.1-81.7c135.6-63.1,288.1-108.4,439-103.3c72.5,2.5,145,16.6,212.6,43c97.5,38.1,186.8,92.1,288.1,121
            c147.2,41.9,308.2,15.7,446.5-44.6c47.4-20.7,92.8-46,135.2-75.6c15.9-11.1,31.4-22.7,46.4-34.8"/>
        <path fill="none" stroke="#172983" stroke-miterlimit="10" d="M1821.9,179.8c1.5-1.3,3.1-2.5,4.6-3.8"/>
    </g>
</g>
</svg>

j'ai vu qu'il y avait une balise <animate> qui peut s'intégrer dans le code svg.

Sinon, en fouillant le web je suis tombé sur http://snapsvg.io/ qui est apparemment la référence en la matière.
mais je n'arrive pas à faire ce que je veux.

Et autre question annexe ! : je voudrais une fois cette animation en place, pouvoir faire apparaitre en fonction de l'avancement de mon svg, des éléments html (texte + image) . Je pense qu'il faut donc que "j'écoute" en JS la progression d'apparition du svg et pouvoir définir que à X % de l'avancement je fais apparaitre tel element html. Quelqu'un a t il une piste pour ca ?

Un passioné de svg et JS pour me venir en aide ?????

merci

Aucune réponse