2

所以我在这里想要实现的是 2 个 SVG 形状之间的平滑变形。在此处输入图像描述

结束状态和开始状态

正如您从这两个图像中看到的那样，这些是它应该看起来的开始和结束状态。当我尝试对其进行变形时，问题就来了。

在此处输入图像描述

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

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

干杯，丹

4

1 回答 1

1

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

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

于 2021-08-17T13:44:51.493 回答