将 SVG 线从直线变形为扩展

编程问答 2022-07-11

问题描述

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

enter image description here

Endstate & Startstate

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

enter image description here

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

我使用了几个库，在撰写本文时，我使用的是带有 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,-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 告诉我的）。 我真的不知道为什么它总是在变形时关闭形状而不是仅仅“拖动”节点。 这是可能的，还是我在这里尝试了无法实现的问题，并且会有更好的解决方案？

干杯， 丹

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animejsjquery-animatemorphingsvgsvgsvg