Анимируйте группу элементов svg с помощью Velocity.js

Я пытаюсь анимировать группу элементов svg, которые ранее были переведены в новую позицию. Я использую Velocity.js для анимации группы в центре области просмотра.
Однако я изо всех сил пытаюсь анимировать группу в центре области просмотра.

Прикрепленные jsfiddle и функция скорости ниже показывают, что группа анимируется сверху слева направо. порта просмотра, чего я не хочу.

Как я могу анимировать группу из новой позиции в центр экрана?

function Customize()
          { 
                  var bound=document.getElementById('parentsvg'); 
                  var width = (bound.width.baseVal.value);
                  var height = bound.height.baseVal.value;
                  var dx= (width/2);
                  var dy= (height/2);
                  var gro = document.getElementById('group');
                  var cl = gro.getBoundingClientRect();
                  var width = (cl.width / 2) ;
                  var height = (cl.height / 2);
                  var xx = dx - width;
                  var yy = dy - height;
                Velocity(gro,{translateX:xx,translateY:yy},{duration:5000},{queue:false});
}

Вот мой Jsfiddle http://jsfiddle.net/KashifMKH/kd0s27vq/3/


javascript svg transform svg-animate velocity.js
person Muhammad Kashif Hanif    schedule 28.01.2015    source источник
comment
Я предполагаю, что вам может понадобиться учитывать масштабирование viewBox? Может быть, что-то вроде stackoverflow.com/questions/9197118/.   -  person Ian    schedule 28.01.2015
comment
@lan Мне нужно двигаться относительно последнего преобразования. Есть ли какой-либо метод в speed.js для этого.   -  person Muhammad Kashif Hanif    schedule 03.02.2015