Как заставить анимацию svg работать правильно?

Question

[Максим Тимофеев]

Есть вот такой код https://jsfiddle.net/57s1rw1x/
При движении мыши запускается анимация. Хотелось бы что бы отрисовка происходила из цеyтра оси y а рисует с верхней точки.
Посмотрите ссылку, будет понятно.
Причем некоторые правильно растягиваются от середины к краям, а некоторые сегменты как бы падают вниз. Не могу понять почему

Answer 1

[Максим Тимофеев]

Сделал так: вместо rect испотьзовал path и просто меняю на новый path, для анимации просто transition в css

Answer 2

[Greg Popov]

Такие вещи лучше делать с помощью css, а в вашем случае просто нужно указать translate координаты, тогда все заработает.

Answer 3

[masambrero]

У вас отрисовка идет от значения смещения по оси Y до значения высоты. Если вы хотите, чтобы смещение шло от центра, то начальный Y должен быть центром оси, а вы его меняете каждый раз на случайное значение.

Comments

[Максим Тимофеев]

В том то и дело что в svg y=0 это верх

[masambrero]

Полагаю вас интересует что-то подобное, хотя я и не уверен - https://jsfiddle.net/57s1rw1x/72/
P.S. моих более чем скромных знаний js не хватило на определение viewbox height((