SVG形状补间

Question

我想将一个形状更改为另一个形状。我尝试使用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);

}

您可以在此fiddle

中看到

转换后你可以看到2个不同的结果形状，我想要的是，转换应该从这两个形状中的一个开始，它应该以另一个形状结束。

有什么想法吗？