将 SVG 线从直线变形为展开

Question

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

正如您从这两张图片中看到的那样，它们是外观的开始和结束状态。 当我尝试对其进行变形时，问题就出现了。

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

我使用了几个库，现在我正在使用 D3 和 Flubber。 在那之前 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 告诉我）。 我真的不知道为什么它总是在变形时关闭形状，而不是仅仅“拖动”节点。 这甚至可能吗，还是我在这里尝试无法实现的，并且会有更好的解决方案？

干杯， 丹

Answer 1

使用 animate 元素手动执行此操作相对容易。请记住，每条路径必须有完全相同数量的命令以相同的顺序。 （我在下面的路径中添加了明确的“l”，以便您可以看到它们是如何匹配的。）这意味着在您的简单水平线上，您需要插入什么都不做的虚拟“v” - 只是为了让路径与另一个路径具有相同的结构。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 128">
        <path
          id="straightTwo"
          d="m 2 123.8 l 21.7 0 v 0 l 391 0 v 0 l 229 0"
          fill="none"
          stroke="blue"
          stroke-linecap="round"
          stroke-width="3">
  
  <animate attributeName="d" from="m 2 123.8 l 21.7 -10 v -20 l 391 -40 v 25 l 229 -10" to="m 2 123.8 l 21.7 0 v 0 l 391 0 v 0 l 229 0" dur="5s"/>
  
  </path>
    </svg>