パスからSVGへの変換

Question

私は仕事をしようとしているこのSVGアニメーションを持っています。以下に実際のイメージの素早く小さなバージョンを作って、私がしようとしていることを説明します。

私が直面した最大の問題は、<line>要素が<path>、または<circle>要素の位置に「追従」するようにすることでした。

これは、アニメーション私はそれがスムーズにこの次のSVGの位置にアニメーション化する数秒後に続いて

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

の第一段階です。その後、それはちょうど2つの間で滑らかに交互にする必要があります。助けを事前に

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