Transformation SVG d'un chemin à un autre

Question

J'ai donc cette animation SVG que j'essaie de faire fonctionner, j'ai fait une petite version rapide de l'image réelle ci-dessous pour expliquer ce que j'essaie de faire.

Le plus gros problème auquel je faisais face était de faire en sorte que les éléments <line> "suivent" la position des éléments <path> ou même <circle>.

C'est la première étape de l'animation

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 82"> 
 
    <defs> 
 
    <style> 
 
     .cls-1 { 
 
     fill: none; 
 
     stroke: #000; 
 
     stroke-miterlimit: 10; 
 
     stroke-width: 2px; 
 
     } 
 
    </style> 
 
    </defs> 
 
    <title>Untitled-5</title> 
 
    <path d="M107,94a10,10,0,1,1-10,10,10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-95 -34)"/> 
 
    <path d="M139,36a10,10,0,1,1-10,10,10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-95 -34)"/> 
 
    <path d="M207,69a10,10,0,1,1-10,10,10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-95 -34)"/> 
 
    <line class="cls-1" x1="38" y1="21" x2="17" y2="61"/> 
 
    <line class="cls-1" x1="54" y1="16" x2="102" y2="40"/> 
 
</svg>

Puis, après quelques secondes, je le veux animer en douceur aux positions de la prochaine SVG. Après cela, il devrait simplement alterner entre les deux.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 68"> 
 
    <defs> 
 
    <style> 
 
     .cls-1 { 
 
     fill: none; 
 
     stroke: #000; 
 
     stroke-miterlimit: 10; 
 
     stroke-width: 2px; 
 
     } 
 
    </style> 
 
    </defs> 
 
    <title>Untitled-5</title> 
 
    <path d="M104,53A10,10,0,1,1,94,63a10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-92 -28)"/> 
 
    <path d="M151,74a10,10,0,1,1-10,10,10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-92 -28)"/> 
 
    <path d="M192,30a10,10,0,1,1-10,10,10,10,0,0,1,10-10m0-2a12,12,0,1,0,12,12,12,12,0,0,0-12-12Z" transform="translate(-92 -28)"/> 
 
    <line class="cls-1" x1="49" y1="52" x2="22" y2="39"/> 
 
    <line class="cls-1" x1="66" y1="48" x2="92" y2="20"/> 
 
</svg>

Merci à l'avance pour l'aide!

Answer 1

Essayer d'animer les lignes qui relient les bords des cercles va être assez difficile avec l'animation SMIL. Les points d'extrémité prendront des chemins non linéaires sur l'écran.

Toutefois, si vous modifiez les lignes afin qu'elles se connectent au centre des cercles, les choses obtiennent un lot plus simple. Pour masquer les parties des lignes qui se trouvent à l'intérieur des cercles, vous pouvez simplement les déplacer derrière les cercles, puis leur donner un remplissage solide. Ou vous pouvez utiliser un masque de cercle pour masquer les lignes étendues, si vous avez vraiment besoin de cercles transparents.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 82"> 
 
    <defs> 
 
    <style> 
 
     .cls-1 { 
 
     fill: none; 
 
     stroke: #000; 
 
     stroke-miterlimit: 10; 
 
     stroke-width: 2px; 
 
     } 
 
    </style> 
 
    </defs> 
 
    <title>Untitled-5</title> 
 
    <line class="cls-1" x1="12" y1="70" x2="44" y2="12"> 
 
    <animate attributeName="y1" from="70" to="35" dur="2s" fill="freeze"/> 
 
    <animate attributeName="x2" from="44" to="59" dur="2s" fill="freeze"/> 
 
    <animate attributeName="y2" from="12" to="56" dur="2s" fill="freeze"/> 
 
    </line> 
 
    <line class="cls-1" x1="44" y1="12" x2="112" y2="45"> 
 
    <animate attributeName="x1" from="44" to="59" dur="2s" fill="freeze"/> 
 
    <animate attributeName="y1" from="12" to="56" dur="2s" fill="freeze"/> 
 
    <animate attributeName="x2" from="112" to="100" dur="2s" fill="freeze"/> 
 
    <animate attributeName="y2" from="45" to="12" dur="2s" fill="freeze"/> 
 
    </line> 
 
    <circle cx="12" cy="70" r="11" fill="white" stroke="black" stroke-width="2"> 
 
    <animate attributeName="cy" from="70" to="35" dur="2s" fill="freeze"/> 
 
    </circle> 
 
    <circle cx="44" cy="12" r="11" fill="white" stroke="black" stroke-width="2"> 
 
    <animate attributeName="cx" from="44" to="59" dur="2s" fill="freeze"/> 
 
    <animate attributeName="cy" from="12" to="56" dur="2s" fill="freeze"/> 
 
    </circle> 
 
    <circle cx="112" cy="45" r="11" fill="white" stroke="black" stroke-width="2"> 
 
    <animate attributeName="cx" from="112" to="100" dur="2s" fill="freeze"/> 
 
    <animate attributeName="cy" from="45" to="12" dur="2s" fill="freeze"/> 
 
    </circle> 
 
</svg>