使用Velocity.js为一组svg元素设置动画

Question

我正在尝试为之前已转换为新位置的一组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/