SVG形粗花呢

我想把一个形状换成另一个。我试着使用D3.js，当转换发生时，有一点超出了地图。以下是一个例子：

function loop() {
path
    .attr("d", d0)
  .transition()
    .duration(5000)
    .attr("transform","scale(1.5)")
    .attr("d", d1)
  .transition()
    .delay(5000)
    .attr("d", d0)
    .each("end", loop);

}

你可以在这张照片上看到

在过渡之后，你可以看到两个不同的结果形状，我想要的是，过渡应该从这两个形状中的一个开始，并且应该结束到另一个形状

---

有什么想法吗？

为了使这两种形状之间平滑过渡，它们需要有完全相同的点数。否则，第二个形状的额外点就被钉在第一个形状的路径末端——或者被切断，如果你在另一个方向上。我的想法和你一样，但正如我在这里看到的，我认为没有相同数量的点。实际上，该代码使用与原始地图形状完全相同的点数专门为圆创建路径——请查看

circle（）

函数。您可能会发现该函数对于解释形状变形非常有用。该示例使用SVG/SMIL动画而不是d3转换，但概念是相同的：您需要定义每个点（包括曲线的控制点）将如何移动。是的，我想，点的数量必须相同。谢谢你的帮助。