Анимация SVG-строк при изменении состояния в приложении React

Question

У меня есть приложение реагирования, в котором элементы абсолютного положения связаны с линиями SVG, например:

Положения компонентов оранжевого поля сохраняются в избыточном состоянии, илинии нарисованы между позициями [x, y] соответствующих блоков.Ящики можно перетаскивать, и линия изменится соответственно.

Можно вызвать действие, когда положение одного (или нескольких) из оранжевых прямоугольников может внезапно изменить положение, скажем, с [330 500] на [250 300].Поскольку в DOM ничего нового не отображается, я могу использовать простой переход CSS: transform для анимации изменения положения блока, чтобы он не выглядел так, как блок «перепрыгивает» из одной позиции в другую.Однако, поскольку этот переход css не изменяет активно позиции блоков, сохраненных в состоянии избыточности, строки будут оставаться статичными до тех пор, пока переход не будет завершен и состояние не будет обновлено, а затем будет перерисовываться между новыми позициями.

Я ищу способ анимировать линии SVG, чтобы они, похоже, были связаны с полями на протяжении перехода блока.

Answer 1

Если кто-то сталкивается с подобной проблемой, это можно исправить, изменив элемент <line> с x1, x2, y1, y2 на элемент <path>, где d={`M ${x1,y1} L ${x2,y2}`} и css-переход transition: all 0.5s в классе пути исправили это.Похоже, пути SVG могут иметь переходы, но строки SVG не могут.