从路径到另一个路径的 SVG 转换

Question

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

我遇到的最大问题是让 <line> 元素 "follow" 成为 <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>

从路径到另一个路径的 SVG 转换

SVG transformation from path to another

css

svg

transformation

smil