從路徑到另一個的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>