Javascript snap.svg:旋转原点错误

您好，为了在SVG上构建基于向量的html节拍器，我需要设置垂直条的动画。我寻找了很多方法来解决我的问题，但我不能做我需要的。 我需要有一个垂直条（基本上是一个矩形），在他的中心底部旋转（由红色点突出显示），就像在这段视频中一样（很抱歉，我在Premiere中这样做了，它不像我希望的那样准确，但我希望足够清楚）：

但是我总是得到一个错误的旋转，旋转也涉及到一个翻译，我不知道为什么，我担心我对snap svg的了解不够（请看片段）：

var s=Snap（#svg”）；
var rect=s.rect（20013040200）.attr（{stroke:'ffffff00'，'strokeWidth'：3，fill:'202070'}）；
var bbox=rect.getBBox（）；
var circle=s.circle（bbox.cx，bbox.y2，10）.attr（{fill:'red'}）；
矩形动画（{transform:“r45，”+（bbox.cx）+'，“+（bbox.y2）}，2500）
#svg{
宽度：400px；
高度：400px；
}
在为具有中心坐标的旋转设置动画时，Snap 0.5.0+中似乎存在错误。如果您退回到以前的版本（0.4.1），它可以工作


var s=Snap（#svg”）；
var rect=s.rect（20013040200）.attr（{stroke:'ffffff00'，'strokeWidth'：3，fill:'202070'}）；
var bbox=rect.getBBox（）；
var circle=s.circle（bbox.cx，bbox.y2，10）.attr（{fill:'red'}）；
矩形动画（{transform:“r45，”+（bbox.cx）+'，“+（bbox.y2）}，2500）
#svg{
宽度：400px；
高度：400px；
}
在为具有中心坐标的旋转设置动画时，Snap 0.5.0+中似乎存在错误。如果您退回到以前的版本（0.4.1），它可以工作


var s=Snap（#svg”）；
var rect=s.rect（20013040200）.attr（{stroke:'ffffff00'，'strokeWidth'：3，fill:'202070'}）；
var bbox=rect.getBBox（）；
var circle=s.circle（bbox.cx，bbox.y2，10）.attr（{fill:'red'}）；
矩形动画（{transform:“r45，”+（bbox.cx）+'，“+（bbox.y2）}，2500）
#svg{
宽度：400px；
高度：400px；
}

似乎有。听起来它是固定的0.5.2。似乎有。听起来它是固定为0.5.2。