从路径到另一个的SVG转换

Question

所以我有这个SVG动画我正在努力工作，我做了一个快速缩小版本的真实图像，以解释我正在尝试做什么。

我面临的最大问题是使<line>元素“跟随”<path>甚至<circle>元素的位置。

这是动画

<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>

然后几秒钟后，我希望它顺利动画这个未来SVG的位置的第一阶段。之后，它应该在两者之间平滑地交替。

<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>

预先感谢帮助！

Answer 1

尝试动画连接圆的边缘的线将会很难用SMIL动画。端点将在屏幕上呈现非线性路径。

但是，如果您更改线条，以便它们连接圆圈的中心，事情得到很多更简单。要隐藏圆圈内的线条部分，只需将它们移动到圆圈后面，然后为圆圈填充实心。或者，如果您确实需要透明圆圈，则可以使用圆形遮罩来隐藏延长的线条。

<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>