snap.svg：回転の原点が間違っています

Question

こんにちは私はベクトルベースのhtmlメトロノームをSVGで作成するために垂直バーをアニメーション化する必要があります。私は問題を解決するために多くを探しましたが、私は必要なことをすることができません。 このビデオのように、中央の底（赤い点で強調表示）で回転する縦線（基本的に長方形）を持つ必要があります（私はPremiereでやってみて申し訳ありません。希望は）十分に明確である：

しかし、私はいつも間違った回転を得る（スニペットを見て、回転も翻訳伴い、私はなぜ知らない、私は、スナップSVGでの私の知識不足のために怖いです）：

var s = Snap("#svg"); 
 
var rect = s.rect(200,130, 40,200).attr({ stroke: '#FFFF00', 'strokeWidth': 3, fill: '#202070' }); 
 
var bbox = rect.getBBox(); 
 
var circle = s.circle(bbox.cx, bbox.y2, 10).attr({fill: 'red'}); 
 
rect.animate({ transform: "r45," + (bbox.cx) + ',' + (bbox.y2) }, 2500);

#svg { 
 
    width : 400px ; 
 
    height: 400px ; 
 
}

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script> 
 
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

Answer 1

中心座標を持つ回転をアニメーション化するとき、Snap 0.5.0+にバグがあるようです。以前のバージョン（0.4.1）に戻すと、それは機能します。

var s = Snap("#svg"); 
 
var rect = s.rect(200,130, 40,200).attr({ stroke: '#FFFF00', 'strokeWidth': 3, fill: '#202070' }); 
 
var bbox = rect.getBBox(); 
 
var circle = s.circle(bbox.cx, bbox.y2, 10).attr({fill: 'red'}); 
 
rect.animate({ transform: "r45," + (bbox.cx) + ',' + (bbox.y2) }, 2500);

#svg { 
 
    width : 400px ; 
 
    height: 400px ; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script> 
 
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>