Javascript 在React应用程序中为状态更改时的SVG行设置动画

我有一个react应用程序，其中绝对位置div与SVG线连接，如下所示：

橙色框组件的位置存储在redux状态，并在相应框的[x，y]位置之间绘制线。可以拖动框，线将相应地变换

当一个（或多个）橙色框的位置突然改变时，可以调用一个操作，例如从[330500]到[250300]。因为没有新的东西被渲染到DOM中，所以我可以使用一个简单的css转换：transform来设置长方体位置变化的动画，这样它看起来就不会像长方体从一个位置“跳跃”到另一个位置。但是，由于此css转换不会主动更改redux状态中存储的框的位置，因此在转换完成并更新状态之前，这些行将保持静态，然后将在新位置之间重新绘制

---

我正在寻找一种方法来设置SVG行的动画，使它们在整个方框转换过程中看起来与方框相连。

如果有人遇到类似的问题，从定义了

x1，x2，y1，y2

的

元素更改为

d={`M${x1，y1}L${x2，y2}}

和css转换

转换：path类上的所有0.5s

都修复了此问题。看起来svg路径可以有转换，但svg行不能。

看一看