将 SVG 线从直线变形为展开

Question

所以我在这里想要实现的是 2 个 SVG 形状之间的平滑变形。

正如您从这两个图像中看到的那样，它们是其外观的开始和结束状态。 当我试图改变它时，问题就来了。

虽然它正在变形，但它会不断关闭形状，如果我查看 devtools，它总是在path标记中的d属性末尾附加Z指示符。

我使用了几个库，在撰写本文时，我使用的是带有 flubber 的 D3。 在此之前有KUTE和animejs。 所有的结果都是一样的。

我和我的设计师来回交流，他们为我提供了几种不同的 svg 来尝试，我还尝试了 svg 软件并手工绘制，所有结果都完全相同。

仅供参考，这将是我的 svg：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 128">
        <path
          id="straightTwo"
          d="m 2,123.84 21.739273,0.0182 40.181833,0.003 391.239074,-0.14697 32.8891,0.13722 229.58891,-0.17218Z"
          fill="none"
          stroke="blue"
          stroke-linecap="round"
          stroke-width="3"
        />
    </svg>

我在 D3 中的逻辑（现在相当混乱）：

const path1 =
        'm 2,123.84 21.739273,0.0182 40.181833,0.003 391.239074,-0.14697 32.8891,0.13722 229.58891,-0.17218';
      const path2 =
        'M2,123.84l21.9-4v-36L470.59,1.24V81.37S635.46,68.61,696,64';
      const interpolator = interpolate(path1, path2);
      d3.select('#straightTwo')
        .transition()
        .duration(25550)
        .attrTween('d', function() {
          return interpolator;
        });

所以我基本上定义了那里的开始和结束路径，并希望中间的步骤由 D3/flubber 完成。 我注意到这些形状之间有相同数量的节点（这至少是 INKSCAPE 和 Illustrator 告诉我的）。 我真的不知道为什么它总是在变形时关闭形状而不是仅仅“拖动”节点。 这甚至是可能的还是我在这里尝试无法实现的事情并且会有更好的解决方案？

干杯，丹