我有一个 React 应用程序，其中绝对位置 div 与 SVG 线相连，如下所示:
橙色框组件的位置存储在 redux state 中，并在相应框的 [x,y] 位置之间绘制线条。可以拖动框，线会相应地变换。
可以调用一个 Action ，其中一个(或多个)橙色框的位置可以突然改变位置，比如从 [330,500] 到 [250,300]。由于没有向 DOM 呈现任何新内容，我可以使用一个简单的 css transition: transform 来为框的位置变化设置动画，因此它看起来不像是框从一个位置“跳”到另一个位置。但是，由于这个 css transition 不会主动改变存储在 redux state 中的框的位置，所以线条将保持静止，直到 transition 完成并更新状态，然后才会在新位置之间重新绘制。
我正在寻找一种方法来为 SVG 线条设置动画，以便它们在整个框过渡过程中看起来都与框相连。
最佳答案
如果有人遇到类似问题，请从 <line> 更改带有 x1, x2, y1, y2 的元素定义为 <path>元素在哪里 d={`M ${x1,y1} L ${x2,y2}`}和一个 CSS 转换 transition: all 0.5s在路径类上修复了这个。似乎 svg 路径可以有过渡，但 svg 行不能。
关于javascript - 在 React 应用程序中根据状态更改动画 SVG 行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50805012/