snap.svg：错误的旋转原点

Question

您好，我需要为垂直条设置动画，以便在 SVG 上构建基于矢量的 html 节拍器。我进行了很多搜索以解决我的问题，但我无法做我需要的事情。 我需要有一个垂直条（基本上是一个矩形）在他的中心底部旋转（由红点突出显示），就像在这个视频中一样（对不起，我用 Premiere 做的，它不像我希望的那样准确，但我希望很清楚）：

但我总是得到错误的旋转，旋转也涉及平移，我不知道为什么，我担心我对 snap svg 的知识很差（看看 sn-p）：

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>