在React应用程序中对状态更改动画SVG线

Question

我有一个反应应用程序，绝对位置div与SVG行连接，如下所示：

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

可以调用一个动作，其中一个（或多个）橙色框的位置可以突然改变位置，例如从[330,500]到[250,300]。由于没有任何新的东西呈现给DOM，我可以使用一个简单的css过渡：变换来设置框的位置变化的动画，使它看起来不像框＃34;跳跃＆＃34;从一个位置到另一个位置。但是，因为此css转换不会主动更改存储在redux状态中的框的位置，所以这些行将保持静态，直到转换完成并更新状态，然后将在新位置之间重新绘制。

我正在寻找一种方法来为SVG线设置动画，使它们在整个框过渡期间看起来都连接到框。

Answer 1

如果有人遇到类似问题，请从定义为{% for key,value in dict %} {{key}}, {{value}} {% endfor %} 的{​​{1}}元素更改为<line>元素x1, x2, y1, y2和css转换<path>在路径类上修复此问题。似乎svg路径可以有转换，但svg路径不能。